fix: align items on collection page (#5355)

align items on collection page
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/collection/CollectionNfts.tsx

@@ -183,20 +183,22 @@ export const CollectionNftsLoading = () => (
 )
 
 export const CollectionNftsAndMenuLoading = () => (
-  <Column alignItems="flex-start" position="relative" width="full">
-    <Row marginY="12" gap="12">
-      <Box className={loadingAsset} borderRadius="12" width={{ sm: '44', md: '100' }} height="44" />
-      <Box
-        className={loadingAsset}
-        borderRadius="12"
-        height="44"
-        display={{ sm: 'none', md: 'flex' }}
-        style={{ width: '220px' }}
-      />
-      <Box className={loadingAsset} borderRadius="12" height="44" width={{ sm: '276', md: '332' }} />
-    </Row>
-    <CollectionNftsLoading />
-  </Column>
+  <InfiniteScrollWrapper>
+    <Column alignItems="flex-start" position="relative" width="full">
+      <Row marginY="12" gap="12">
+        <Box className={loadingAsset} borderRadius="12" width={{ sm: '44', md: '100' }} height="44" />
+        <Box
+          className={loadingAsset}
+          borderRadius="12"
+          height="44"
+          display={{ sm: 'none', md: 'flex' }}
+          style={{ width: '220px' }}
+        />
+        <Box className={loadingAsset} borderRadius="12" height="44" width={{ sm: '276', md: '332' }} />
+      </Row>
+      <CollectionNftsLoading />
+    </Column>
+  </InfiniteScrollWrapper>
 )
 
 export const getSortDropdownOptions = (setSortBy: (sortBy: SortBy) => void, hasRarity: boolean): DropDownOption[] => {
@@ -532,58 +534,60 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
             </SweepButton>
           )}
         </ActionsContainer>
-        {sweepIsOpen && (
-          <Sweep contractAddress={contractAddress} minPrice={debouncedMinPrice} maxPrice={debouncedMaxPrice} />
-        )}
-        <Row
-          paddingTop={!!markets.length || !!traits.length || minMaxPriceChipText ? '12' : '0'}
-          gap="8"
-          flexWrap="wrap"
-        >
-          {markets.map((market) => (
-            <TraitChip
-              key={market}
-              value={
-                <MarketNameWrapper>
-                  <MarketplaceLogo src={`/nft/svgs/marketplaces/${market.toLowerCase()}.svg`} />
-                  {MARKETPLACE_ITEMS[market as keyof typeof MARKETPLACE_ITEMS]}
-                </MarketNameWrapper>
-              }
-              onClick={() => {
-                scrollToTop()
-                removeMarket(market)
-              }}
-            />
-          ))}
-          {traits.map((trait) => (
-            <TraitChip
-              key={trait.trait_value}
-              value={
-                trait.trait_type === 'Number of traits'
-                  ? `${trait.trait_value} trait${pluralize(Number(trait.trait_value))}`
-                  : `${trait.trait_type}: ${trait.trait_value}`
-              }
-              onClick={() => {
-                scrollToTop()
-                removeTrait(trait)
-              }}
-            />
-          ))}
-          {minMaxPriceChipText && (
-            <TraitChip
-              value={minMaxPriceChipText}
-              onClick={() => {
-                scrollToTop()
-                setMin('')
-                setMax('')
-                setPrevMinMax([0, 100])
-              }}
-            />
-          )}
-          {Boolean(traits.length || markets.length || minMaxPriceChipText) && (
-            <ClearAllButton onClick={handleClearAllClick}>Clear All</ClearAllButton>
+        <InfiniteScrollWrapper>
+          {sweepIsOpen && (
+            <Sweep contractAddress={contractAddress} minPrice={debouncedMinPrice} maxPrice={debouncedMaxPrice} />
           )}
-        </Row>
+          <Row
+            paddingTop={!!markets.length || !!traits.length || minMaxPriceChipText ? '12' : '0'}
+            gap="8"
+            flexWrap="wrap"
+          >
+            {markets.map((market) => (
+              <TraitChip
+                key={market}
+                value={
+                  <MarketNameWrapper>
+                    <MarketplaceLogo src={`/nft/svgs/marketplaces/${market.toLowerCase()}.svg`} />
+                    {MARKETPLACE_ITEMS[market as keyof typeof MARKETPLACE_ITEMS]}
+                  </MarketNameWrapper>
+                }
+                onClick={() => {
+                  scrollToTop()
+                  removeMarket(market)
+                }}
+              />
+            ))}
+            {traits.map((trait) => (
+              <TraitChip
+                key={trait.trait_value}
+                value={
+                  trait.trait_type === 'Number of traits'
+                    ? `${trait.trait_value} trait${pluralize(Number(trait.trait_value))}`
+                    : `${trait.trait_type}: ${trait.trait_value}`
+                }
+                onClick={() => {
+                  scrollToTop()
+                  removeTrait(trait)
+                }}
+              />
+            ))}
+            {minMaxPriceChipText && (
+              <TraitChip
+                value={minMaxPriceChipText}
+                onClick={() => {
+                  scrollToTop()
+                  setMin('')
+                  setMax('')
+                  setPrevMinMax([0, 100])
+                }}
+              />
+            )}
+            {Boolean(traits.length || markets.length || minMaxPriceChipText) && (
+              <ClearAllButton onClick={handleClearAllClick}>Clear All</ClearAllButton>
+            )}
+          </Row>
+        </InfiniteScrollWrapper>
       </AnimatedBox>
       <InfiniteScrollWrapper>
         <InfiniteScroll

src/nft/pages/collection/index.tsx

@@ -152,7 +152,7 @@ const Collection = () => {
               <CollectionDisplaySection>
                 <Box
                   position={isMobile ? 'fixed' : 'sticky'}
-                  top="0"
+                  top={{ sm: '0', md: '72' }}
                   left="0"
                   width={isMobile ? 'full' : '0'}
                   height={isMobile && isFiltersExpanded ? 'full' : undefined}