fix: dynamic padding based on screen sizes for collections + my nft (#5064)

* init

* my nft pages

src/nft/components/profile/view/ProfilePage.tsx

@@ -7,7 +7,6 @@ import { CrossIcon, TagIcon } from 'nft/components/icons'
 import { FilterSidebar } from 'nft/components/profile/view/FilterSidebar'
 import { buttonTextMedium, subhead } from 'nft/css/common.css'
 import {
-  useBag,
   useFiltersExpanded,
   useIsMobile,
   useProfilePageState,
@@ -15,6 +14,7 @@ import {
   useWalletBalance,
   useWalletCollections,
 } from 'nft/hooks'
+import { ScreenBreakpointsPaddings } from 'nft/pages/collection/index.css'
 import { fetchMultipleCollectionStats, fetchWalletAssets, OSCollectionsFetcher } from 'nft/queries'
 import { ProfilePageStateType, WalletCollection } from 'nft/types'
 import { Dispatch, SetStateAction, useEffect, useMemo, useReducer, useState } from 'react'
@@ -47,6 +47,11 @@ const SellModeButton = styled.button<{ active: boolean }>`
   }
 `
 
+const ProfilePageColumn = styled(Column)`
+  overflow-x: hidden !important;
+  ${ScreenBreakpointsPaddings}
+`
+
 const FILTER_SIDEBAR_WIDTH = 300
 const PADDING = 16
 
@@ -71,7 +76,6 @@ export const ProfilePage = () => {
   const resetSellAssets = useSellAsset((state) => state.reset)
   const setSellPageState = useProfilePageState((state) => state.setProfilePageState)
   const [isFiltersExpanded, setFiltersExpanded] = useFiltersExpanded()
-  const isBagExpanded = useBag((state) => state.bagExpanded)
   const isMobile = useIsMobile()
   const [isSellMode, toggleSellMode] = useReducer((s) => !s, false)
 
@@ -164,12 +168,7 @@ export const ProfilePage = () => {
   })
 
   return (
-    <Column
-      width="full"
-      paddingLeft={{ sm: `${PADDING}`, md: '52' }}
-      paddingRight={{ sm: `${PADDING}`, md: isBagExpanded ? '0' : '72' }}
-      paddingTop={{ sm: `${PADDING}`, md: '40' }}
-    >
+    <ProfilePageColumn width="full" paddingTop={{ sm: `${PADDING}`, md: '40' }}>
       {anyQueryIsLoading ? (
         <ProfilePageLoadingSkeleton />
       ) : walletAssets.length === 0 ? (
@@ -280,7 +279,7 @@ export const ProfilePage = () => {
           </Box>
         </Row>
       )}
-    </Column>
+    </ProfilePageColumn>
   )
 }
 

src/nft/pages/collection/index.css.ts

 import { style } from '@vanilla-extract/css'
+import {
+  MAX_WIDTH_MEDIA_BREAKPOINT,
+  MOBILE_MEDIA_BREAKPOINT,
+  SMALL_MEDIA_BREAKPOINT,
+} from 'components/Tokens/constants'
 import { buttonTextMedium } from 'nft/css/common.css'
 import { loadingBlock } from 'nft/css/loading.css'
+import { css } from 'styled-components/macro'
 
 import { sprinkles, vars } from '../../css/sprinkles.css'
 
@@ -60,3 +66,25 @@ export const noCollectionAssets = sprinkles({
   justifyContent: 'center',
   marginTop: '40',
 })
+
+export const ScreenBreakpointsPaddings = css`
+  @media screen and (min-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
+    padding-left: 48px;
+    padding-right: 48px;
+  }
+
+  @media screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+
+  @media screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  @media screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+`

src/nft/pages/collection/index.tsx

@@ -14,12 +14,23 @@ import { Suspense, useEffect } from 'react'
 import { useQuery } from 'react-query'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { useSpring } from 'react-spring'
+import styled from 'styled-components/macro'
 
 const FILTER_WIDTH = 332
 const BAG_WIDTH = 324
 
 export const CollectionBannerLoading = () => <Box height="full" width="full" className={styles.loadingBanner} />
 
+const CollectionDescriptionSection = styled(Column)`
+  ${styles.ScreenBreakpointsPaddings}
+`
+
+const CollectionDisplaySection = styled(Row)`
+  ${styles.ScreenBreakpointsPaddings}
+  align-items: flex-start;
+  position: relative;
+`
+
 const Collection = () => {
   const { contractAddress } = useParams()
   const setIsCollectionStatsLoading = useIsCollectionLoading((state) => state.setIsCollectionStatsLoading)
@@ -93,7 +104,7 @@ const Collection = () => {
                   )}
                 </Box>
               </Box>
-              <Column paddingX="48">
+              <CollectionDescriptionSection>
                 {(isLoading || collectionStats !== undefined) && (
                   <CollectionStats stats={collectionStats || ({} as GenieCollection)} isMobile={isMobile} />
                 )}
@@ -105,8 +116,8 @@ const Collection = () => {
                     toggleActivity()
                   }}
                 />
-              </Column>
-              <Row alignItems="flex-start" position="relative" paddingX="48">
+              </CollectionDescriptionSection>
+              <CollectionDisplaySection>
                 <Box position="sticky" top="72" width="0">
                   {isFiltersExpanded && <Filters traits={collectionStats?.traits ?? []} />}
                 </Box>
@@ -138,7 +149,7 @@ const Collection = () => {
                         </Suspense>
                       )}
                 </AnimatedBox>
-              </Row>
+              </CollectionDisplaySection>
             </>
           ) : (
             // TODO: Put no collection asset page here