fix: Fix page width for fullscreen mode send page (#25639)

hmalik88 · darkwing · commit 8a43dfa4a9ef · 2024-07-11T09:29:55.000-05:00
## **Description** Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? The send page was too wide in full screen mode 2. What is the improvement/solution? Added a media query to handle page width in fulls screen mode. ## **Manual testing steps** 1. Build the extension 2. Open the send screen in full page view ## **Screenshots/Recordings** ### **Before** https://github.com/MetaMask/metamask-extension/assets/41640681/3ebab98b-fb7a-495e-ab3f-72e2a82f46d3 ### **After** <img width="2443" alt="Screenshot 2024-07-02 at 12 48 32 PM" src="https://github.com/MetaMask/metamask-extension/assets/41640681/049a1624-092e-467a-a5c1-94e8200c3d0a"> ## **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/develop/.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/develop/.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.
diff --git a/ui/components/multichain/pages/send/index.scss b/ui/components/multichain/pages/send/index.scss
@@ -1,7 +1,11 @@
 @use "design-system";
 
 .multichain-send-page {
-  width: 100%;
+  width: 408px;
+
+  @media (max-width: 371px) {
+    width: 100%;
+  }
 
   &__account-picker {
     height: 62px;
