feat: center backup toast

[jonybur]

Description

Centers the backup warning toast

Related issues

Fixes:

Manual testing steps

1. Go to this page...

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.

[metamaskbot]

Builds ready [b4cdc8f]

• 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, 6
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1618 ± 88 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1381	2100	1618	182	87
		domContentLoaded	1345	2085	1594	183	88
		load	1381	2101	1618	183	88
		domInteractive	23	66	39	13	6
		backgroundConnect	7	68	24	18	9
		firstReactRender	15	80	35	25	12
		getState	4	59	13	14	7
		initialActions	0	1	0	0	0
		loadScripts	989	1578	1194	156	75
		setupStore	6	63	15	19	9
		uiStartup	1581	2412	1867	229	110

Bundle size diffs

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

[Imran-imtiaz48]

Review: CSS for Content Container
Strengths:

1. Good use of border-radius: The border-radius: 8px; property adds a modern and sleek appearance to the element. This is a great choice for improving the visual appeal.
2. Responsive sizing: The use of calc(100% - 16px) for width ensures the element adapts to its parent container while maintaining consistent padding. This approach balances flexibility and design consistency.
3. Flex layout: The display: flex; property on &__content-container is an excellent choice for creating flexible and responsive layouts, enabling better alignment and spacing of child elements.
4. Max-width defined: The max-width: 472px prevents the container from becoming too large on wider screens, maintaining a clean and readable design.
   Suggestions:
5. Add comments: Adding comments about the purpose of specific properties (e.g., why you chose max-width: 472px) can help others understand your intent.
6. Consider accessibility: Ensure that the padding and dimensions work well for users with accessibility needs, especially if the content inside involves text or interactive elements.
7. Variable usage: If you're using a CSS preprocessor (e.g., SCSS), consider using variables for values like 16px, 8px, and 472px to maintain consistency and simplify future adjustments.
8. Add fallback for older browsers: If browser support is a concern, double-check compatibility for calc() and flex.

[EtherWizard33]

LGTM