fix(web): nft image overlap on text in tx flow #5684
Conversation
Branch preview✅ Deploy successful! Storybook: |
📦 Next.js Bundle Analysis for @safe-global/webThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
Coverage report for
|
St.❔ |
Category | Percentage | Covered / Total |
|---|---|---|---|
| 🟡 | Statements | 76.34% (+0.09% 🔼) |
14240/18654 |
| 🔴 | Branches | 54.91% (+0.08% 🔼) |
3648/6644 |
| 🟡 | Functions | 60.46% (+0.22% 🔼) |
2081/3442 |
| 🟡 | Lines | 77.96% (+0.05% 🔼) |
12962/16627 |
Show files with reduced coverage 🔻
St.❔ |
File | Statements | Branches | Functions | Lines |
|---|---|---|---|---|---|
| 🟢 | ... / constants.ts |
72.94% (-0.55% 🔻) |
97.06% (+0.18% 🔼) |
100% | 95.83% (+0.09% 🔼) |
| 🔴 | ... / index.ts |
14.71% (-0.22% 🔻) |
0% | 0% | 15.87% (-0.26% 🔻) |
| 🟢 | ... / logic.ts |
98.04% (-1.96% 🔻) |
80% (-20% 🔻) |
100% | 97.87% (-2.13% 🔻) |
| 🟡 | ... / useGasLimit.ts |
74.58% | 60% (-2.5% 🔻) |
71.43% | 73.68% |
| 🟢 | ... / utils.ts |
90.32% | 70% (-5% 🔻) |
100% | 89.29% |
Test suite run success
1797 tests passing in 251 suites.
Report generated by 🧪jest coverage report action from 0fe070a
| @@ -20,7 +20,7 @@ type SendNftBatchProps = { | |||
| } | |||
|
|
|||
| const NftItem = ({ image, name, description }: { image: string; name: string; description?: string }) => ( | |||
| <Stack direction="row" spacing={1} flexWrap="nowrap" alignItems="flex-start"> | |||
| <Stack direction="row" spacing={2} flexWrap="nowrap" alignItems="flex-start"> | |||
There was a problem hiding this comment.
It's not about a bigger spacing. 1 is OK too. It's about rectangular (non-square) images overflowing out of their container and overlapping with the text.
There was a problem hiding this comment.
Alright, got it. That is why the changes are more complex than I expected. Would like to get the NFT from @liliya-soroka to make the correct changes. Thanks.
|
@liliya-soroka could you share the Safe with that landscape NFT with @valens-carpentier? |
|
@liliya-soroka bump |
|
@valens-carpentier I'll have to close it for now... |
What it solves
This PR addresses the spacing issue between the NFT image and the text in the transaction flow.
Resolves ##3114
How this PR fixes it
Increased spacing value from
1to2to ensure sufficient padding between the image and the text content.How to test it
<img style="display: block; margin: 0 auto;" height="64" width="64" alt="Test Image" src="https://picsum.photos/1920/1080">Inside the element:
<div class="MuiBox-root mui-style-72fd9l"></div>Screenshots
Checklist