Skip to content

Commit ef9f3a3

Browse files
n3psn3ps
authored
fix: layout inconsistencies - swaps (#38535)
<!-- 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 layout inconsistencies in some swaps/bridge related pages [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38535?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: layout inconsistencies ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **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] > Switch key swaps/bridge routes to RootLayout and normalize page containers (full-height, consistent background) while removing legacy margin/height rules. > > - **Routing**: > - Move `CROSS_CHAIN_SWAP_TX_DETAILS_ROUTE`, `CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE`, and `CONFIRM_ADD_SUGGESTED_NFT_ROUTE` to `RootLayout` in `ui/pages/routes/routes.component.tsx`. > - **UI/Layout**: > - Confirm screens: add `h-full` to containers in `confirm-add-suggested-token.js` and `confirm-add-suggested-nft.js`; update snapshot accordingly. > - Simplify SCSS for confirm pages by removing responsive margin/height overrides in `confirm-add-suggested-token/index.scss` and `confirm-add-suggested-nft/index.scss`. > - `page-container`: remove `max-height: 82vh` at `screen-sm-min` in `ui/components/ui/page-container/index.scss`. > - Bridge tx details: add `bg-background-default` to `.bridge__container` in `transaction-details.tsx` for consistent background. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit a7f3c53. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent d237d87 commit ef9f3a3

File tree

8 files changed

+18
-43
lines changed

8 files changed

+18
-43
lines changed

‎ui/components/ui/page-container/index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,6 @@
223223

224224
@include design-system.screen-sm-min {
225225
.page-container {
226-
max-height: 82vh;
227226
min-height: 570px;
228227
flex: 0 0 auto;
229228
margin-right: auto;

‎ui/pages/bridge/transaction-details/transaction-details.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ const CrossChainSwapTxDetails = ({
227227
);
228228

229229
return (
230-
<div className="bridge__container">
230+
<div className="bridge__container bg-background-default">
231231
<Header
232232
className="bridge__header"
233233
startAccessory={

‎ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = `
99
/>
1010
<div>
1111
<div
12-
class="mm-box confirm-add-suggested-nft page-container confirm-add-suggested-nft--has-app-header-multichain mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
12+
class="mm-box confirm-add-suggested-nft page-container h-full confirm-add-suggested-nft--has-app-header-multichain mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
1313
>
1414
<div
1515
class="mm-box confirm-add-suggested-nft__header mm-box--padding-bottom-2"
@@ -224,7 +224,7 @@ exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = `
224224
</body>,
225225
"container": <div>
226226
<div
227-
class="mm-box confirm-add-suggested-nft page-container confirm-add-suggested-nft--has-app-header-multichain mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
227+
class="mm-box confirm-add-suggested-nft page-container h-full confirm-add-suggested-nft--has-app-header-multichain mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
228228
>
229229
<div
230230
class="mm-box confirm-add-suggested-nft__header mm-box--padding-bottom-2"

‎ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,12 @@ const ConfirmAddSuggestedNFT = ({
7878

7979
const hasAppHeader = location?.pathname ? !hideAppHeader({ location }) : true;
8080

81-
const classNames = classnames('confirm-add-suggested-nft page-container', {
82-
'confirm-add-suggested-nft--has-app-header-multichain': hasAppHeader,
83-
});
81+
const classNames = classnames(
82+
'confirm-add-suggested-nft page-container h-full',
83+
{
84+
'confirm-add-suggested-nft--has-app-header-multichain': hasAppHeader,
85+
},
86+
);
8487

8588
const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
8689
const suggestedNftsNotSorted = useSelector(getSuggestedNfts);

‎ui/pages/confirm-add-suggested-nft/index.scss‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -75,21 +75,8 @@
7575
}
7676

7777
&.page-container {
78-
$height-screen-sm-min: 720px;
79-
8078
background-color: var(--color-background-alternative);
8179
transition: margin-top 0.3s ease-in-out, margin-bottom 0.3s ease-in-out;
82-
83-
@media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
84-
margin-top: 32px;
85-
margin-bottom: 32px;
86-
}
87-
88-
&.confirm-add-suggested-nft--has-app-header-multichain {
89-
@media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
90-
margin-top: 0;
91-
}
92-
}
9380
}
9481

9582
.page-container {

‎ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,12 @@ const ConfirmAddSuggestedToken = ({
9797

9898
const hasAppHeader = location?.pathname ? !hideAppHeader({ location }) : true;
9999

100-
const classNames = classnames('confirm-add-suggested-token page-container', {
101-
'confirm-add-suggested-token--has-app-header-multichain': hasAppHeader,
102-
});
100+
const classNames = classnames(
101+
'confirm-add-suggested-token page-container h-full',
102+
{
103+
'confirm-add-suggested-token--has-app-header-multichain': hasAppHeader,
104+
},
105+
);
103106

104107
const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
105108
const suggestedTokens = useSelector(getSuggestedTokens);

‎ui/pages/confirm-add-suggested-token/index.scss‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -47,24 +47,7 @@
4747
}
4848

4949
&.page-container {
50-
$height-screen-sm-min: 720px;
51-
5250
transition: margin-top 0.3s ease-in-out, margin-bottom 0.3s ease-in-out;
53-
54-
@media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
55-
margin-top: 32px;
56-
margin-bottom: 32px;
57-
}
58-
59-
@include design-system.screen-sm-min {
60-
max-height: 100%;
61-
}
62-
63-
&.confirm-add-suggested-token--has-app-header-multichain {
64-
@media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
65-
margin-top: 0;
66-
}
67-
}
6851
}
6952

7053
.page-container {

‎ui/pages/routes/routes.component.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -774,7 +774,7 @@ export default function Routes() {
774774
</RouteWithLayout>
775775
<RouteWithLayout
776776
path={`${CROSS_CHAIN_SWAP_TX_DETAILS_ROUTE}/:srcTxMetaId`}
777-
layout={LegacyLayout}
777+
layout={RootLayout}
778778
// v5 Route supports exact with render props, but TS types don't recognize it
779779
// Using spread operator with type assertion to bypass incorrect type definitions
780780
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -799,7 +799,7 @@ export default function Routes() {
799799
</RouteWithLayout>
800800
<RouteWithLayout
801801
path={CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE}
802-
layout={LegacyLayout}
802+
layout={RootLayout}
803803
>
804804
{createV5CompatRoute(ConfirmAddSuggestedTokenPage, {
805805
wrapper: AuthenticatedV5Compat,
@@ -809,7 +809,7 @@ export default function Routes() {
809809
</RouteWithLayout>
810810
<RouteWithLayout
811811
path={CONFIRM_ADD_SUGGESTED_NFT_ROUTE}
812-
layout={LegacyLayout}
812+
layout={RootLayout}
813813
>
814814
{createV5CompatRoute(ConfirmAddSuggestedNftPage, {
815815
wrapper: AuthenticatedV5Compat,

0 commit comments

Comments
 (0)