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,6 +183,7 @@ export const CollectionNftsLoading = () => (
 )
 
 export const CollectionNftsAndMenuLoading = () => (
+  <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" />
@@ -197,6 +198,7 @@ export const CollectionNftsAndMenuLoading = () => (
       </Row>
       <CollectionNftsLoading />
     </Column>
+  </InfiniteScrollWrapper>
 )
 
 export const getSortDropdownOptions = (setSortBy: (sortBy: SortBy) => void, hasRarity: boolean): DropDownOption[] => {
@@ -532,6 +534,7 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
             </SweepButton>
           )}
         </ActionsContainer>
+        <InfiniteScrollWrapper>
           {sweepIsOpen && (
             <Sweep contractAddress={contractAddress} minPrice={debouncedMinPrice} maxPrice={debouncedMaxPrice} />
           )}
@@ -584,6 +587,7 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
               <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}