Skip to content

Increase width of extension popup to 400px #31444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
3 of 9 tasks
georgewrmarshall opened this issue Mar 31, 2025 · 0 comments · Fixed by #31443
Closed
3 of 9 tasks

Increase width of extension popup to 400px #31444

georgewrmarshall opened this issue Mar 31, 2025 · 0 comments · Fixed by #31443
Assignees
@georgewrmarshall
Labels
INVALID-ISSUE-TEMPLATE Issue's body doesn't match any issue template. release-12.17.0 Issue or pull request that will be included in release 12.17.0 team-design-system All issues relating to design system in Extension

Comments

@georgewrmarshall
Copy link
Contributor

georgewrmarshall commented Mar 31, 2025 •
edited
Loading

Description

The MetaMask extension popup width needs to be increased from 357px to 400px to prepare for an upcoming default font size increase from 14px to 16px. This change will ensure proper text readability and layout accommodation when the font size update is implemented.

Scenario (for user stories only)

  • GIVEN a user opens the MetaMask extension popup
  • WHEN the popup renders
  • THEN the width should be 400px instead of 357px
  • AND all content should display properly without horizontal scrolling

Design (for user stories only)

[Design team to provide updated specs if available]

Technical Details (for technical tasks only)

The following files need to be updated to change the popup width from 357px to 400px:

  • app/popup-init.html
  • app/popup.html
  • ui/components/app/modals/modal.js
  • ui/components/ui/mascot/mascot.stories.js
  • ui/pages/unlock-page/index.scss

Threat Modeling Framework (for technical tasks only)

  • What are we working on?
    • Increasing the popup width to accommodate larger font sizes
  • What can go wrong?
    • Layout issues in certain screens
    • Inconsistent width across different views
    • Poor display on smaller screens
  • What are we going to do about it?
    • Thoroughly test all popup views
    • Ensure consistent width across all components
    • Verify no horizontal scrollbars appear
  • Did we do a good job?
    • To be evaluated through QA testing and user feedback

Acceptance Criteria

  • Extension popup width is consistently 400px across all views
  • No horizontal scrollbars appear in common workflows
  • All modal dialogs adjust properly to the new width
  • All existing functionality continues to work as expected
  • No visual regressions in any popup views
  • Changes are applied consistently across all necessary files
  • Extension works properly across all supported browsers

Stakeholder Review (for MetaMask employees only)

  • Engineering
  • Design
  • Product
  • QA
  • Security
  • Legal
  • Marketing
  • Management
  • Other

References

  • Current popup width: 357px
  • Target popup width: 400px
  • Files to be modified:
    • app/popup-init.html
    • app/popup.html
    • ui/components/app/modals/modal.js
    • ui/components/ui/mascot/mascot.stories.js
    • ui/pages/unlock-page/index.scss
  • Related to upcoming font size increase from 14px to 16px
@georgewrmarshall georgewrmarshall self-assigned this Mar 31, 2025
@georgewrmarshall georgewrmarshall added the team-design-system All issues relating to design system in Extension label Mar 31, 2025
@georgewrmarshall georgewrmarshall mentioned this issue Mar 31, 2025
Merged
7 tasks
@metamaskbot metamaskbot added the INVALID-ISSUE-TEMPLATE Issue's body doesn't match any issue template. label Mar 31, 2025
github-merge-queue bot pushed a commit that referenced this issue Apr 1, 2025
@georgewrmarshall
feat: updating popup width of extension from 357px to 400px (#31443)
2524890 
## **Description**

This PR increases the default popup width of the MetaMask extension from
`357px` to `400px` in preparation for an upcoming change to increase the
default font size from `14px` to `16px`.

## **Related issues**

Fixes: #31444

## **Manual testing steps**

1. Install the extension with these changes
2. Open the MetaMask popup
3. Verify the popup width is 400px and content displays correctly
4. Test various screens and modals to ensure proper layout
5. Confirm no horizontal scrollbars appear in common workflows

## **Screenshots/Recordings**

### **Before**

Width: `357px `

<img width="851" alt="Screenshot 2025-03-31 at 10 19 26 AM"
src="https://github.com/user-attachments/assets/060c7ad9-59eb-431d-bad3-4f93b4e77f13"
/>

### **After**

Width: `400px`

<img width="921" alt="Screenshot 2025-03-31 at 10 17 55 AM"
src="https://github.com/user-attachments/assets/d8d56277-dd2f-406a-8023-993515a7f2cd"
/>

## **Pre-merge author checklist**

- [x] 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)
- [x] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR

## **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
@metamaskbot metamaskbot added the release-12.17.0 Issue or pull request that will be included in release 12.17.0 label Apr 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@georgewrmarshall georgewrmarshall

Labels
INVALID-ISSUE-TEMPLATE Issue's body doesn't match any issue template. release-12.17.0 Issue or pull request that will be included in release 12.17.0 team-design-system All issues relating to design system in Extension
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: updating popup width of extension from 357px to 400px MetaMask/metamask-extension
2 participants
@georgewrmarshall @metamaskbot