fix: cp-12.13.0 fixes drag and drop in network list menu modal

[georgewrmarshall]

Description

This PR fixes an issue with the drag-and-drop functionality in the network list menu by isolating the modal animation to only use opacity instead of transform. The transform animation was interfering with the react-beautiful-dnd library's positioning calculations, causing the draggable items to behave incorrectly.

The solution introduces a custom network-menu-fade animation in the index.scss file for the network menu modal, which only animates opacity and removes the transform property. This ensures the drag-and-drop functionality works as expected while maintaining a smooth fade-in animation.

Key Changes:

• Added a custom network-menu-fade animation in index.scss.
• Removed transform from the modal to fix drag-and-drop behavior.
• Isolated the animation to the network menu component to avoid affecting other modals.

Related issues

Fixes: #30436

Manual testing steps

1. Open the MetaMask extension.
2. Click on the network selector in the top left corner.
3. Try to drag and reorder any of the enabled networks.
4. Verify that the drag-and-drop functionality works smoothly and the modal fades in correctly.

Screenshots/Recordings

Before

• Dragging network items was inconsistent or broken due to transform interference.

modal.slideup.720.mov

After

• Network items can be dragged and reordered smoothly.
• The modal fades in without any transform-related issues.

network.modal.fix720.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 included tests if applicable.
• I’ve documented my code using JSDoc format if applicable.
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[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.

[NidhiKJha]

LGTM

[metamaskbot]

Builds ready [a743d53]

• 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, 8
  • 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 (1583 ± 45 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	281	1803	1523	302	145
		domContentLoaded	1398	1740	1564	91	44
		load	1407	1756	1583	95	45
		domInteractive	19	149	37	28	14
		backgroundConnect	9	56	18	13	6
		firstReactRender	14	92	40	27	13
		getState	4	71	16	20	10
		initialActions	0	1	0	0	0
		loadScripts	977	1328	1124	90	43
		setupStore	7	59	18	18	9
		uiStartup	1606	1983	1821	102	49

Bundle size diffs

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