fix: adjust gap down to 16px on large screens (#5276)

* fix: adjust gap down to 16px on large screens

* pr feedback

src/nft/components/collection/Card.tsx

@@ -17,13 +17,13 @@ import { body, bodySmall, buttonTextMedium, subhead } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useIsMobile } from 'nft/hooks'
 import { GenieAsset, Rarity, TokenType, WalletAsset } from 'nft/types'
-import { isAudio, isVideo } from 'nft/utils'
-import { fallbackProvider, putCommas } from 'nft/utils'
+import { fallbackProvider, isAudio, isVideo, putCommas } from 'nft/utils'
 import { floorFormatter } from 'nft/utils/numbers'
 import {
   createContext,
   MouseEvent,
   ReactNode,
+  useCallback,
   useContext,
   useLayoutEffect,
   useMemo,
@@ -216,6 +216,8 @@ const Container = ({
     }
   }
 
+  const toggleHover = useCallback(() => toggleHovered(), [])
+
   return (
     <CardContext.Provider value={providerValue}>
       <Box
@@ -224,8 +226,8 @@ const Container = ({
         borderRadius={BORDER_RADIUS}
         className={selected ? styles.selectedCard : styles.card}
         draggable={false}
-        onMouseEnter={() => toggleHovered()}
-        onMouseLeave={() => toggleHovered()}
+        onMouseEnter={toggleHover}
+        onMouseLeave={toggleHover}
         transition="250"
         onClick={isDisabled ? () => null : onClick ?? handleAssetInBag}
       >

src/nft/components/collection/CollectionNfts.css.ts

@@ -5,7 +5,7 @@ import { breakpoints, sprinkles } from '../../css/sprinkles.css'
 export const assetList = style([
   sprinkles({
     display: 'grid',
-    gap: { sm: '8', md: '8', lg: '12', xl: '16', xxl: '20', xxxl: '20' },
+    gap: { sm: '8', md: '8', lg: '12', xl: '16' },
   }),
   {
     //This treatment of the grid still uses minmax, but enforces an amount of grid items per breakpoint. This means that when the bag and filter panels appear, we no longer get layout thrash and have a consistent animation as the width changes. It uses calc() and subtracts the grid gap to ensure the min size will always fit without wrapping.
@@ -21,10 +21,10 @@ export const assetList = style([
         gridTemplateColumns: 'repeat(auto-fill, minmax(calc(100%/4 - 16px), 1fr) )',
       },
       [`screen and (min-width: ${breakpoints.xxl}px)`]: {
-        gridTemplateColumns: 'repeat(auto-fill, minmax(calc(100%/5 - 20px), 1fr) )',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(calc(100%/5 - 16px), 1fr) )',
       },
       [`screen and (min-width: ${breakpoints.xxxl}px)`]: {
-        gridTemplateColumns: 'repeat(auto-fill, minmax(calc(100%/7 - 20px), 1fr) )',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(calc(100%/7 - 16px), 1fr) )',
       },
     },
   },