fix: cp-12.13.0 fix modal scroll bar flash

[georgewrmarshall]

Description

This PR fixes a visual issue where a flashing scroll bar appears during modal animations. The issue was caused by the animation properties in the modal-content component in this recently merged PR. The fix involves:

1. Removing overflow: auto from the modal-content container
2. Adding overflow: hidden to the animation keyframes to prevent scroll bar flickering

This is a hotfix for the 12.13.0 release and addresses a regression identified during visual testing.

Related issues

Fixes: #30354

Manual testing steps

1. Open any modal in the application (e.g. Networks modal)
2. Observe the modal animation
3. Verify there is no flashing scroll bar during the animation
4. Test with different screen sizes to ensure consistent behavior

Screenshots/Recordings

Before

before.mov

After

after.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines)

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.

Visual regression testing for all modals is being tracked in this spreadsheet:
https://docs.google.com/spreadsheets/d/1fzGHktbmnE-jDa8SxvmiTmunTOchFyAYmpBRlKAbQYo/edit?gid=700367359#gid=700367359

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[georgewrmarshall]

Fixes bug in the Modal storybook

Before

before.storybook720.mov

After

storybook.after720.mov

[brianacnguyen]

is it possible to update this doc/screenshot to have the children string says something along that line of ModalBody Content instead of Modal Content? Since there's a ModalContent component I actually thought it should be used instead of ModalBody from reading that ss

[brianacnguyen]

Approved with a non-blocking recommendation to update doc for better clarity

[metamaskbot]

Builds ready [992023b]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1672 ± 69 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	254	1984	1543	450	216
		domContentLoaded	1457	1922	1649	133	64
		load	1466	1978	1672	144	69
		domInteractive	23	83	37	18	9
		backgroundConnect	8	84	27	21	10
		firstReactRender	14	75	35	23	11
		getState	4	58	12	13	6
		initialActions	0	1	0	0	0
		loadScripts	1002	1393	1163	113	54
		setupStore	6	61	20	20	10
		uiStartup	1688	2497	1914	189	91

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[georgewrmarshall]

Impact of removing overflow: auto

The removal of overflow: auto in the ModalContent component is designed to fix the scrollbar flickering issue without affecting properly composed modals that already handle scrolling correctly through the design system components. This includes modals structured in either of these standard ways:

// Standard Modal Structure 1
<ModalContent>
  <ModalHeader />
  <ModalBody>
    Modal Body
  </ModalBody>
</ModalContent>

// Standard Modal Structure 2  
<ModalContent>
  <ModalHeader />
  <Box className="handle-scrolling-via-css">
    Modal content
  </Box>
</ModalContent>

Potential Impact Considerations:

• ✅ Modals using the design system components correctly will continue to work as expected
• ⚠️ Modals that don't follow the standard composition pattern might experience layout issues where the overflow content is not visible

Verification & Testing:
To ensure compatibility, I've completed comprehensive visual regression testing of all modal implementations. The results are documented in:

• Visual Regression Spreadsheet
• Screenshot Comparison Folder

[metamaskbot]

Builds ready [b51bea9]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1755 ± 53 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	340	2064	1680	326	157
		domContentLoaded	1554	1925	1726	97	47
		load	1586	2085	1755	110	53
		domInteractive	25	114	40	26	12
		backgroundConnect	12	162	37	35	17
		firstReactRender	15	71	31	21	10
		getState	5	61	19	20	10
		initialActions	0	0	0	0	0
		loadScripts	1134	1477	1274	88	42
		setupStore	8	61	19	18	9
		uiStartup	1805	2377	2022	125	60

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)