fix(snaps): Scrollbar being partially hidden behind footer (#29435)

## **Description**

This fixes the scrollbar in Snap dialogs being partially hidden behind
the footer.

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

## **Related issues**

Fixes:

## **Manual testing steps**

## **Screenshots/Recordings**

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

### **Before**


![image](https://github.com/user-attachments/assets/66cf18d5-4e0c-49b4-ad44-353384404be8)

![image](https://github.com/user-attachments/assets/81df4231-7b23-4377-b6fe-e18e829d50dd)

### **After**


![image](https://github.com/user-attachments/assets/6390d11c-223e-4e73-8f8e-3f361e0c069f)

![image](https://github.com/user-attachments/assets/269ac240-a7e0-4716-844d-680f2389166f)


## **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.

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

@@ -2,7 +2,6 @@ import { BoxElement, JSXElement } from '@metamask/snaps-sdk/jsx';
 import { getJsxChildren } from '@metamask/snaps-utils';
 import { mapToTemplate } from '../utils';
 import {
-  BlockSize,
   Display,
   FlexDirection,
 } from '../../../../../helpers/constants/design-system';
@@ -78,12 +77,7 @@ export const container: UIComponentFactory<BoxElement> = ({
     props: {
       display: Display.Flex,
       flexDirection: FlexDirection.Column,
-      height: BlockSize.Full,
       className: 'snap-ui-renderer__container',
-      style: {
-        overflowY: 'auto',
-        paddingBottom: useFooter ? '80px' : 'initial',
-      },
     },
   };
 };

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

@@ -5,10 +5,6 @@
   $width-screen-md-min: 80vw;
   $width-screen-lg-min: 62vw;
 
-  &__content {
-    margin-bottom: 0 !important;
-  }
-
   &__container {
     & > *:first-child {
       gap: 16px;

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

@@ -131,6 +131,10 @@ const SnapUIRendererComponent = ({
         className="snap-ui-renderer__content"
         height={BlockSize.Full}
         backgroundColor={contentBackgroundColor}
+        style={{
+          overflowY: 'auto',
+          marginBottom: useFooter ? '80px' : '0',
+        }}
       >
         <MetaMaskTemplateRenderer sections={sections} />
       </Box>

ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap

@@ -40,10 +40,10 @@ exports[`SnapsSection renders section for typed sign request 1`] = `
       >
         <div
           class="mm-box snap-ui-renderer__content mm-box--height-full"
+          style="overflow-y: auto; margin-bottom: 0px;"
         >
           <div
-            class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
-            style="overflow-y: auto;"
+            class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
           >
             <p
               class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
@@ -98,10 +98,10 @@ exports[`SnapsSection renders section personal sign request 1`] = `
       >
         <div
           class="mm-box snap-ui-renderer__content mm-box--height-full"
+          style="overflow-y: auto; margin-bottom: 0px;"
         >
           <div
-            class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
-            style="overflow-y: auto;"
+            class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
           >
             <p
               class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"