chore(runway): cherry-pick fix: cp-12.13.0 fixes drag and drop in network list menu modal

[runway-github]

• fix: cp-12.13.0 fixes drag and drop in network list menu modal (fix: cp-12.13.0 fixes drag and drop in network list menu modal #30437)

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

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

[metamaskbot]

Builds ready [69535c0]

• 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 (1705 ± 89 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1480	2430	1705	191	92
		domContentLoaded	1469	2347	1681	179	86
		load	1478	2401	1705	186	89
		domInteractive	25	142	54	35	17
		backgroundConnect	9	68	27	19	9
		firstReactRender	14	72	34	24	12
		getState	4	19	8	3	2
		initialActions	0	0	0	0	0
		loadScripts	1015	1733	1228	147	71
		setupStore	7	59	21	20	10
		uiStartup	1684	2613	1940	192	92

[georgewrmarshall]

Closing this PR since I just realized this is a Sev2, which doesn’t warrant being cherry-picked into the release branch.