Skip to content

Commit 5ca2553

Browse files
n3psNidhiKJha
andauthored
fix: asset layout cp-13.12.0 (#38537)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** Fix asset page layout from getting shrinked [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38537?quickstart=1) ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: fix: asset page layout ## **Related issues** Fixes: ## **Manual testing steps** 1. Home screen 2. Tokens tab 3. click on an asset ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** |Before|After| |---|---| |<img width="443" height="407" alt="image" src="https://github.com/user-attachments/assets/b662ab2a-ab20-4478-8cc7-6bb4942f94bd" />|<img width="430" height="383" alt="image" src="https://github.com/user-attachments/assets/370243e1-f152-4578-89b1-81db4a5416b4" />| ### **After** <!-- [screenshots/recordings] --> ## **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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Remove horizontal auto margins from the AssetPage root container and update snapshots accordingly. > > - **Frontend** > - **Asset layout**: In `ui/pages/asset/components/asset-page.tsx`, remove `marginLeft="auto"` and `marginRight="auto"` from the root `Box` (`asset__content`), keeping only `marginTop={4}`. > - **Tests** > - Update Jest snapshots in `ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap` to reflect removed `mm-box--margin-right-auto` and `mm-box--margin-left-auto` classes. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 7dabfe3. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Nidhi Kumari <[email protected]>
1 parent 4f6037d commit 5ca2553

File tree

2 files changed

+4
-9
lines changed

2 files changed

+4
-9
lines changed

ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`AssetPage should render a native asset 1`] = `
44
<div>
55
<div
6-
class="mm-box asset__content mm-box--margin-top-4 mm-box--margin-right-auto mm-box--margin-left-auto"
6+
class="mm-box asset__content mm-box--margin-top-4"
77
>
88
<div
99
class="mm-box mm-box--padding-top-1 mm-box--padding-right-4 mm-box--padding-bottom-3 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
@@ -422,7 +422,7 @@ exports[`AssetPage should render a native asset 1`] = `
422422
exports[`AssetPage should render an ERC20 asset without prices 1`] = `
423423
<div>
424424
<div
425-
class="mm-box asset__content mm-box--margin-top-4 mm-box--margin-right-auto mm-box--margin-left-auto"
425+
class="mm-box asset__content mm-box--margin-top-4"
426426
>
427427
<div
428428
class="mm-box mm-box--padding-top-1 mm-box--padding-right-4 mm-box--padding-bottom-3 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
@@ -869,7 +869,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
869869
exports[`AssetPage should render an ERC20 token with prices 1`] = `
870870
<div>
871871
<div
872-
class="mm-box asset__content mm-box--margin-top-4 mm-box--margin-right-auto mm-box--margin-left-auto"
872+
class="mm-box asset__content mm-box--margin-top-4"
873873
>
874874
<div
875875
class="mm-box mm-box--padding-top-1 mm-box--padding-right-4 mm-box--padding-bottom-3 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"

ui/pages/asset/components/asset-page.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -327,12 +327,7 @@ const AssetPage = ({
327327
const showTronResources = isTron && type === AssetType.native;
328328

329329
return (
330-
<Box
331-
marginLeft="auto"
332-
marginRight="auto"
333-
marginTop={4}
334-
className="asset__content"
335-
>
330+
<Box marginTop={4} className="asset__content">
336331
<Box
337332
display={Display.Flex}
338333
flexDirection={FlexDirection.Row}

0 commit comments

Comments
 (0)