Skip to content

Commit

Permalink
fix: Makes NFT list properly wrap within the send modal (#30036)
Browse files Browse the repository at this point in the history
## **Description**
- This is a non-fork mirror of @darkwing's PR:
#30005

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

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30005?quickstart=1)

## **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**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<img width="521" alt="SCR-20250130-hbwm"
src="https://github.com/user-attachments/assets/abeb3b78-be50-4aa4-841f-f8441ba4103f"
/>



## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

Co-authored-by: David Walsh <[email protected]>
  • Loading branch information
dbrans and darkwing authored Jan 31, 2025
1 parent 7fdff0a commit c3acb6f
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions ui/components/app/assets/nfts/nft-grid/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
.nft-items {
&__wrapper {
grid-template-columns: repeat(4, minmax(120px, 1fr));

/* When used in the send NFT modal */
.mm-modal-content & {
grid-template-columns: repeat(2, minmax(120px, 1fr));
}
}

@include design-system.screen-md-max {
Expand Down

0 comments on commit c3acb6f

Please sign in to comment.