feat: Make footers and headers sticky in confirmation popups

[david0xd]

Description

New Snaps custom UI pages require UI/UX improvements that also require having sticky headers and footer within the confirmation popup. This PR makes sticky headers and footer, while content in the middle is now scrollable.

Related issues

Fixes:

Manual testing steps

1. Do some actions that will trigger the confirmation popup to appear (Snap alert, Snap custom UI dialog, Account Snaps, Add network confirmation, etc.).
2. Make sure content is visible and headers + footers are sticky/fixed.
3. Make sure that there are no edge cases with UI glitches, etc.

Screenshots/Recordings

Before

After

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.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[metamaskbot]

Builds ready [e0a711c]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (1961 ± 140 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1614	2604	1960	283	136
		domContentLoaded	1589	2474	1926	261	125
		load	1608	2613	1961	291	140
		domInteractive	22	114	37	20	9

Bundle size diffs

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

[codecov]

Codecov Report

Attention: Patch coverage is 44.44444% with 5 lines in your changes missing coverage. Please review.

Project coverage is 70.13%. Comparing base (56363e2) to head (e0a711c).
Report is 2 commits behind head on develop.

Files with missing lines	Patch %	Lines
...i/pages/confirmations/confirmation/confirmation.js	44.44%	5 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #26853      +/-   ##
===========================================
- Coverage    70.13%   70.13%   -0.00%     
===========================================
  Files         1424     1424              
  Lines        49571    49577       +6     
  Branches     13867    13870       +3     
===========================================
+ Hits         34765    34768       +3     
- Misses       14806    14809       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.