fix: Correct Snaps Home scroll behavior (#29660)

<!--
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 the scroll behavior on Snaps home pages following changes to the
scroll behavior on the Snap confirmation screens.

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

## **Manual testing steps**

1. Install the home page example Snap
2. View the home page
3. See that the scroll behavior is as expected (no overlap with footer)

## **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/2cc80d61-f9f7-4408-be1d-8bb70d7098d3)


### **After**


![image](https://github.com/user-attachments/assets/ad65306e-215a-4808-8670-d3c4201fe91c)

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

@@ -64,16 +64,16 @@ export const SnapHomeRenderer = ({ snapId }) => {
     }
   }, [unapprovedTemplatedConfirmations, unapprovedConfirmations, history]);
 
-  return (
-    <Box
-      height={BlockSize.Full}
-      width={BlockSize.Full}
-      backgroundColor={BackgroundColor.backgroundAlternative}
-      style={{
-        overflowY: 'auto',
-      }}
-    >
-      {error && (
+  if (error) {
+    return (
+      <Box
+        height={BlockSize.Full}
+        width={BlockSize.Full}
+        backgroundColor={BackgroundColor.backgroundAlternative}
+        style={{
+          overflowY: 'auto',
+        }}
+      >
         <Box height={BlockSize.Full} padding={4}>
           <SnapDelineator snapName={snapName} type={DelineatorType.Error}>
             <Text variant={TextVariant.bodySm} marginBottom={4}>
@@ -82,18 +82,19 @@ export const SnapHomeRenderer = ({ snapId }) => {
             <Copyable text={error.message} />
           </SnapDelineator>
         </Box>
-      )}
-      {(interfaceId || loading) && (
-        <SnapUIRenderer
-          snapId={snapId}
-          interfaceId={interfaceId}
-          isLoading={loading}
-          useDelineator={false}
-          useFooter
-          contentBackgroundColor={BackgroundColor.backgroundAlternative}
-        />
-      )}
-    </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <SnapUIRenderer
+      snapId={snapId}
+      interfaceId={interfaceId}
+      isLoading={loading}
+      useDelineator={false}
+      useFooter
+      contentBackgroundColor={BackgroundColor.backgroundAlternative}
+    />
   );
 };
 

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

@@ -99,6 +99,10 @@ const SnapUIRendererComponent = ({
 
   const { state: initialState, context } = 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 useDelineator ? (
     <SnapDelineator
       snapName={snapName}
@@ -133,7 +137,7 @@ const SnapUIRendererComponent = ({
         backgroundColor={contentBackgroundColor}
         style={{
           overflowY: 'auto',
-          marginBottom: useFooter ? '80px' : '0',
+          marginBottom: useFooter && hasFooter ? '80px' : '0',
         }}
       >
         <MetaMaskTemplateRenderer sections={sections} />

ui/pages/snaps/snap-view/snap-view.js

@@ -18,8 +18,8 @@ import {
 import { Content, Page } from '../../../components/multichain/pages/page';
 import SnapAuthorshipHeader from '../../../components/app/snaps/snap-authorship-header';
 import SnapHomeMenu from '../../../components/app/snaps/snap-home-menu';
+import { SnapHomeRenderer } from '../../../components/app/snaps/snap-home-page/snap-home-renderer';
 import SnapSettings from './snap-settings';
-import SnapHome from './snap-home';
 
 function SnapView() {
   const history = useHistory();
@@ -129,7 +129,7 @@ function SnapView() {
               resetInitRemove={resetInitRemove}
             />
           ) : (
-            <SnapHome snapId={snapId} />
+            <SnapHomeRenderer snapId={snapId} />
           )}
         </Content>
       </Page>