fix: confirmation footer

Author: n3ps

ui/components/app/snaps/snap-ui-renderer/index.scss

@@ -7,6 +7,8 @@
   $width-screen-lg-min: 62vw;
 
   &__container {
+    height: 100%;
+
     & > *:first-child {
       gap: 16px;
       // Note: Do not replace margin with padding
@@ -79,42 +81,10 @@
   &__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 {
       flex: 1 1 50%; // Ensure that adjacent form elements take up to 50% width

ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js

@@ -109,10 +109,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 (
     <SnapInterfaceContextProvider
       snapId={snapId}
@@ -125,7 +121,6 @@ const SnapUIRendererComponent = ({
         backgroundColor={backgroundColor}
         style={{
           overflowY: 'auto',
-          marginBottom: useFooter && hasFooter ? '80px' : '0',
         }}
       >
         <MetaMaskTemplateRenderer sections={sections} />