fix: Makes NFT list properly wrap within the send modal

[dbrans]

Description

• This is a non-fork mirror of @darkwing's PR: fix: Makes NFT list properly wrap within the send modal #30005

Wraps the NFT list within the Send flow such that it will not overflow

Related issues

Fixes: #29974

Manual testing steps

1. Use an account with many NFTs
2. Start send flow
3. Click the AssetPicker, choose NFTs
4. See the wrapped NFTs

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[httpJunkie]

So, the resulting CSS will be:

.nft-items__wrapper {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.mm-modal-content .nft-items__wrapper {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

What It Does:

• By default, .nft-items__wrapper is a grid with 4 cols where each col has:
  • A minimum width of 120px
  • A maximum width that adjusts (1fr makes it flexible to take available space)
• Inside .mm-modal-content (ie: in a modal window), the .nft-items__wrapper:
  • Changes to 2 columns instead of 4
  • This means the layout adapts based on whether it is inside a modal

Sorry couldn't not chime in on a pure SCSS change lol

[metamaskbot]

Builds ready [b8489b6]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1727 ± 103 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	455	2351	1662	348	167
		domContentLoaded	1512	2326	1701	206	99
		load	1521	2357	1727	216	103
		domInteractive	23	93	48	25	12
		backgroundConnect	11	71	26	17	8
		firstReactRender	16	75	38	25	12
		getState	5	96	16	22	10
		initialActions	0	1	0	0	0
		loadScripts	1081	1685	1247	162	78
		setupStore	8	81	22	22	11
		uiStartup	1737	2654	1979	263	126

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)