fix: snap confirmation footer cp-13.13.0

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);

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`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -42,7 +42,7 @@ exports[`SnapUIRenderer re-focuses input after re-render 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -96,7 +96,7 @@ exports[`SnapUIRenderer re-renders when the interface changes 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -150,7 +150,7 @@ exports[`SnapUIRenderer re-syncs state when the interface changes 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -204,7 +204,7 @@ exports[`SnapUIRenderer renders basic UI 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -231,7 +231,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 80px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -302,7 +302,7 @@ exports[`SnapUIRenderer supports container backgrounds 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-default"
-    style="overflow-y: auto; margin-bottom: 80px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -350,7 +350,7 @@ exports[`SnapUIRenderer supports interactive inputs 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -388,7 +388,7 @@ exports[`SnapUIRenderer supports the contentBackgroundColor prop 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-default"
-    style="overflow-y: auto; margin-bottom: 80px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -436,7 +436,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 80px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"

ui/components/app/snaps/snap-ui-renderer/components/__snapshots__/account-selector.test.ts.snap

@@ -4,7 +4,7 @@ exports[`SnapUIAccountSelector renders an account selector 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -309,7 +309,7 @@ exports[`SnapUIAccountSelector renders inside a field 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"

ui/components/app/snaps/snap-ui-renderer/components/__snapshots__/address-input.test.ts.snap

@@ -4,7 +4,7 @@ exports[`SnapUIAddressInput renders the matched address info in a disabled state
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -102,7 +102,7 @@ exports[`SnapUIAddressInput renders with an invalid CAIP Account ID 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -144,7 +144,7 @@ exports[`SnapUIAddressInput will not render avatar when displayAvatar is false 1
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -186,7 +186,7 @@ exports[`SnapUIAddressInput will render 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -224,7 +224,7 @@ exports[`SnapUIAddressInput will render a matched address name 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -322,7 +322,7 @@ exports[`SnapUIAddressInput will render avatar when displayAvatar is true 1`] =
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"

ui/components/app/snaps/snap-ui-renderer/components/__snapshots__/asset-selector.test.ts.snap

@@ -4,7 +4,7 @@ exports[`SnapUIAssetSelector renders an asset selector 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -108,7 +108,7 @@ exports[`SnapUIAssetSelector renders inside a field 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"

ui/components/app/snaps/snap-ui-renderer/components/__snapshots__/date-time-picker.test.ts.snap

@@ -4,7 +4,7 @@ exports[`SnapUIDateTimePicker can show an error 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -58,7 +58,7 @@ exports[`SnapUIDateTimePicker renders a date picker 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -101,7 +101,7 @@ exports[`SnapUIDateTimePicker renders a date time picker 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -144,7 +144,7 @@ exports[`SnapUIDateTimePicker renders a time picker 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -187,7 +187,7 @@ exports[`SnapUIDateTimePicker renders inside a field 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"

ui/components/app/snaps/snap-ui-renderer/components/__snapshots__/file-input.test.ts.snap

@@ -4,7 +4,7 @@ exports[`SnapUIFileInput renders and emits events when used 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"

ui/components/app/snaps/snap-ui-renderer/components/__snapshots__/form.test.ts.snap

@@ -4,7 +4,7 @@ exports[`SnapUIForm will render 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -54,7 +54,7 @@ exports[`SnapUIForm will render with fields 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto; margin-bottom: 0px;"
+    style="overflow-y: auto;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"

ui/components/app/snaps/snap-ui-renderer/components/container.ts

@@ -1,11 +1,11 @@
-import { ContainerElement, JSXElement } from '@metamask/snaps-sdk/jsx';
+import { Box, ContainerElement, JSXElement } from '@metamask/snaps-sdk/jsx';
 import { getJsxChildren } from '@metamask/snaps-utils';
 import { mapToTemplate } from '../utils';
 import {
   Display,
   FlexDirection,
 } from '../../../../../helpers/constants/design-system';
-import { UIComponentFactory } from './types';
+import { UIComponent, UIComponentFactory } from './types';
 import { DEFAULT_FOOTER } from './footer';
 
 export const container: UIComponentFactory<ContainerElement> = ({
@@ -23,24 +23,32 @@ export const container: UIComponentFactory<ContainerElement> = ({
     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,