fix: layout inconsistencies - account pages (#38533)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Fixes layout inconsistencies in account pages in fullscreen and
sidepanel

The widths should be controlled at the layout level

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38533?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: fix: layout inconsistencies - account pages

## **Related issues**

Fixes:

## **Manual testing steps**

1. Account menu > Account Details
2. click Private Kays

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

| Account details | Private keys |
|---|---|
|<img width="841" height="358" alt="image"
src="https://github.com/user-attachments/assets/af560aad-873a-4a67-afa4-98e51c848f6c"
/>|<img width="1538" height="370" alt="image"
src="https://github.com/user-attachments/assets/32c3d317-ee3f-421a-bc62-30a168e2ce32"
/>|


### **After**

<!-- [screenshots/recordings] -->

| Account details | Private keys |
|---|---|
|<img width="830" height="364" alt="image"
src="https://github.com/user-attachments/assets/5f5408e5-4248-4ce2-b814-f5dfd137c205"
/>|<img width="830" height="382" alt="image"
src="https://github.com/user-attachments/assets/ff602c76-4958-42e5-9312-f36c3a11daa3"
/>|

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Switches account-related routes to `RootLayout`, updates Create
Account to use design system `Box` with full-height, and removes
max-width/responsive width constraints from account pages.
> 
> - **Routing/Layout**:
> - Use `RootLayout` for `NEW_ACCOUNT_ROUTE` and
`MULTICHAIN_ACCOUNT_PRIVATE_KEY_LIST_PAGE_ROUTE` in
`ui/pages/routes/routes.component.tsx`.
> - **Create Account Page**:
> - Replace `Box` import with `@metamask/design-system-react` and add
`h-full` class in `ui/pages/create-account/create-account.component.js`.
> - Remove responsive width media queries from
`ui/pages/create-account/create-account.scss`.
> - **Multichain Details Styles**:
> - Remove `max-width` constraint from
`ui/pages/multichain-accounts/multichain-account-details-page/index.scss`
and `ui/pages/multichain-accounts/wallet-details-page/index.scss`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e6b0315. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: n3ps

ui/pages/create-account/create-account.component.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom-v5-compat';
-import { Box } from '../../components/component-library';
+import { Box } from '@metamask/design-system-react';
 import { CONNECT_HARDWARE_ROUTE } from '../../helpers/constants/routes';
 import ConnectHardwareForm from './connect-hardware';
 
 export default function CreateAccountPage() {
   return (
-    <Box className="new-account-wrapper">
+    <Box className="new-account-wrapper h-full">
       <Routes>
         <Route
           path={CONNECT_HARDWARE_ROUTE}

ui/pages/create-account/create-account.scss

@@ -2,16 +2,4 @@
 
 .new-account-wrapper {
   background-color: var(--color-background-default);
-
-  @media screen and (min-width: design-system.$break-large) {
-    width: 85vw;
-  }
-
-  @media screen and (min-width: 768px) {
-    width: 80vw;
-  }
-
-  @media screen and (min-width: 1280px) {
-    width: 62vw;
-  }
 }

ui/pages/multichain-accounts/multichain-account-details-page/index.scss

@@ -1,6 +1,4 @@
 .multichain-account-details-page {
-  max-width: 600px;
-
   &__section {
     .multichain-account-details__row {
       margin-bottom: 1px;

ui/pages/multichain-accounts/wallet-details-page/index.scss

@@ -1,6 +1,4 @@
 .multichain-wallet-details-page {
-  max-width: 600px;
-
   .multichain-wallet-details-page__rows-container {
     .multichain-wallet-details-page__row {
       margin-bottom: 1px;

ui/pages/routes/routes.component.tsx

@@ -831,7 +831,7 @@ export default function Routes() {
             authenticated
             path={NEW_ACCOUNT_ROUTE}
             component={CreateAccountPage}
-            layout={LegacyLayout}
+            layout={RootLayout}
           />
           <RouteWithLayout path={`${CONNECT_ROUTE}/:id`} layout={RootLayout}>
             {createV5CompatRoute<{ id: string }>(PermissionsConnect, {
@@ -1022,7 +1022,7 @@ export default function Routes() {
           <RouteWithLayout
             path={`${MULTICHAIN_ACCOUNT_PRIVATE_KEY_LIST_PAGE_ROUTE}/:accountGroupId`}
             exact
-            layout={LegacyLayout}
+            layout={RootLayout}
           >
             {createV5CompatRoute<{ accountGroupId: string }>(
               MultichainAccountPrivateKeyListPage,