diff --git a/test/e2e/page-objects/pages/dialog/snap-interactive-dialog.ts b/test/e2e/page-objects/pages/dialog/snap-interactive-dialog.ts index 2d4512ec5307..0b0dc1fa265f 100644 --- a/test/e2e/page-objects/pages/dialog/snap-interactive-dialog.ts +++ b/test/e2e/page-objects/pages/dialog/snap-interactive-dialog.ts @@ -82,6 +82,10 @@ class SnapInteractiveDialog { * @returns The ISO string representation of the selected date and time. */ async selectInDateTimePicker(day: number, hour: number, minute: number) { + const dateTimePicker = await this.driver.findElement( + selectors.exampleDateTimePicker, + ); + await this.driver.scrollToElement(dateTimePicker); await this.driver.clickElement(selectors.exampleDateTimePicker); await this.#selectDateInPicker(day); @@ -114,6 +118,10 @@ class SnapInteractiveDialog { * @returns The ISO string representation of the selected time. */ async selectInTimePicker(hour: number, minute: number) { + const timePicker = await this.driver.findElement( + selectors.exampleTimePicker, + ); + await this.driver.scrollToElement(timePicker); await this.driver.clickElement(selectors.exampleTimePicker); await this.#selectTimeInPicker(hour, minute); @@ -137,6 +145,10 @@ class SnapInteractiveDialog { * @returns The ISO string representation of the selected date. */ async selectInDatePicker(day: number) { + const datePicker = await this.driver.findElement( + selectors.exampleDatePicker, + ); + await this.driver.scrollToElement(datePicker); await this.driver.clickElement(selectors.exampleDatePicker); await this.#selectDateInPicker(day); diff --git a/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap b/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap index 2c902b128b77..d34b7f6e7ecd 100644 --- a/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap +++ b/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap @@ -4,7 +4,7 @@ exports[`SnapUIRenderer prefills interactive inputs with existing state 1`] = `
= ({ @@ -23,24 +23,32 @@ export const container: UIComponentFactory = ({ children.pop(); } - const templateChildren = children.map((child) => + const firstChildIsBox = + typeof children[0] !== 'string' && children[0]?.type === 'Box'; + + // Ensure the first child is always a Box to apply layout styles correctly + const containerChildren = firstChildIsBox + ? children + : [Box({ children: children[0] as JSXElement }), ...children.slice(1)]; + + const templateChildren = containerChildren.map((child) => mapToTemplate({ useFooter, onCancel, t, ...params, + element: child as JSXElement, }), ); // Injects the prompt input field into the template if the dialog is a prompt type. if (promptLegacyProps) { - templateChildren.push({ + // We can safely push to the first child's children as we ensure it's always a Box. + (templateChildren[0].children as UIComponent[])?.push({ element: 'FormTextField', key: 'snap-prompt-input', props: { - marginLeft: 4, - marginRight: 4, className: 'snap-prompt-input', value: promptLegacyProps.inputValue, onChange: promptLegacyProps.onInputChange, diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss index 33f3383a6615..6b673922c462 100644 --- a/ui/components/app/snaps/snap-ui-renderer/index.scss +++ b/ui/components/app/snaps/snap-ui-renderer/index.scss @@ -7,14 +7,16 @@ $width-screen-lg-min: 62vw; &__container { - & > *:first-child { - gap: 16px; - // Note: Do not replace margin with padding - // @see {@link https://github.com/MetaMask/metamask-extension/pull/29385} - margin: 16px; - } + height: 100%; + } + + &__container > &__panel { + gap: 16px; + overflow-y: auto; + padding: 16px; } + &__content { flex: 1 1 auto; } @@ -79,41 +81,9 @@ &__footer { box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; - position: fixed; - bottom: 0; margin-top: auto; transition: bottom 0.3s ease-in-out; - - @include design-system.screen-sm-min { - max-width: $width-screen-sm-min; - } - - @include design-system.screen-md-min { - max-width: $width-screen-md-min; - } - - @include design-system.screen-lg-min { - max-width: $width-screen-lg-min; - } } - // footer may exist as a sibling of the content, or a child of the content. When it is a child, - // we need to adjust the max-width to account for the content border. - &__content { - .snap-ui-renderer__footer { - @include design-system.screen-sm-min { - max-width: calc($width-screen-sm-min - 2px); - } - - @include design-system.screen-md-min { - max-width: calc($width-screen-md-min - 2px); - } - - @include design-system.screen-lg-min { - max-width: calc($width-screen-lg-min - 2px); - } - } - } - &__panel.box--flex-direction-row { .snap-ui-renderer__field { diff --git a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js index c5b787fa4cf2..3543ca492384 100644 --- a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js +++ b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js @@ -118,10 +118,6 @@ const SnapUIRendererComponent = ({ const { state: initialState } = interfaceState; - // The renderer should only have a footer if there is a default cancel action - // or if the footer component has been used. - const hasFooter = onCancel || content?.props?.children?.[1] !== undefined; - return ( diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap index 94b7ffe2325c..a79b070dd89c 100644 --- a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap @@ -40,16 +40,20 @@ exports[`SnapsSection renders section for typed sign request 1`] = ` >
-

- Hello world again! -

+

+ Hello world again! +

+
@@ -98,16 +102,20 @@ exports[`SnapsSection renders section personal sign request 1`] = ` >
-

- Hello world! -

+

+ Hello world! +

+
diff --git a/ui/pages/routes/routes.component.tsx b/ui/pages/routes/routes.component.tsx index 99a8f9ef2256..406a75eb2d62 100644 --- a/ui/pages/routes/routes.component.tsx +++ b/ui/pages/routes/routes.component.tsx @@ -564,13 +564,13 @@ export default function Routes() { createRouteWithLayout({ path: SNAPS_ROUTE, component: SnapList, - layout: LegacyLayout, + layout: RootLayout, authenticated: true, }), createRouteWithLayout({ path: `${SNAPS_VIEW_ROUTE}/*`, component: SnapView, - layout: LegacyLayout, + layout: RootLayout, authenticated: true, }), createRouteWithLayout({ diff --git a/ui/pages/snaps/snap-view/index.scss b/ui/pages/snaps/snap-view/index.scss index 4c5c4f6fba1d..6424f36d2d3b 100644 --- a/ui/pages/snaps/snap-view/index.scss +++ b/ui/pages/snaps/snap-view/index.scss @@ -1,32 +1,12 @@ @use "design-system"; .snap-view { - $height-screen-sm-max: 100%; - $width-screen-sm-min: 85vw; - $width-screen-md-min: 80vw; - $width-screen-lg-min: 62vw; - // prevent overflow-x max-width: 100%; width: 100%; + height: 100%; flex-flow: column nowrap; - @include design-system.screen-sm-max { - height: $height-screen-sm-max; - } - - @include design-system.screen-sm-min { - width: $width-screen-sm-min; - } - - @include design-system.screen-md-min { - width: $width-screen-md-min; - } - - @include design-system.screen-lg-min { - width: $width-screen-lg-min; - } - &__content { @include design-system.screen-sm-max { padding-top: 0; diff --git a/ui/pages/snaps/snaps-list/index.scss b/ui/pages/snaps/snaps-list/index.scss index 4088af1d0b53..968df3f5ab90 100644 --- a/ui/pages/snaps/snaps-list/index.scss +++ b/ui/pages/snaps/snaps-list/index.scss @@ -1,31 +1,12 @@ @use "design-system"; .snaps { - $height-screen-sm-max: 100%; - $width-screen-sm-min: 85vw; - $width-screen-md-min: 80vw; - $width-screen-lg-min: 62vw; - // prevent overflow-x max-width: 100%; width: 100%; + height: 100%; flex-flow: column nowrap; - @include design-system.screen-sm-max { - height: $height-screen-sm-max; - } - - @include design-system.screen-sm-min { - width: $width-screen-sm-min; - } - - @include design-system.screen-md-min { - width: $width-screen-md-min; - } - - @include design-system.screen-lg-min { - width: $width-screen-lg-min; - } &__content { padding: 0;