Don't use fixed footer

packages/keychain/package.json

@@ -16,7 +16,7 @@
     "storybook": "storybook dev -p 6001",
     "storybook:build": "storybook build",
     "storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6006 --silent",
-    "test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6006 'pnpm test-storybook -u'",
+    "test-storybook": "test-storybook",
     "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6006 'pnpm test-storybook'"
   },
   "dependencies": {

packages/keychain/src/components/layout/Content.tsx

@@ -8,7 +8,7 @@ export function Content({
   return (
     <div
       className={cn(
-        "w-full px-4 pb-[var(--footer-height)] flex flex-col items-stretch gap-2",
+        "w-full px-4 flex flex-col items-stretch gap-2 max-h-[400px] overflow-y-auto",
         className,
       )}
     >

packages/keychain/src/components/layout/footer/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, PropsWithChildren, useEffect, useRef } from "react";
+import { forwardRef, memo, PropsWithChildren, useRef } from "react";
 import { cn } from "@cartridge/ui-next";
 import { Link } from "react-router-dom";
 
@@ -9,32 +9,10 @@ export function Footer({
 }: PropsWithChildren & { className?: string; showCatridgeLogo?: boolean }) {
   const ref = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    if (!ref.current) {
-      document.documentElement.style.setProperty("--footer-height", "0px");
-      return;
-    }
-
-    const observer = new ResizeObserver((entries) => {
-      const rect = entries[0].contentRect;
-      if (!rect.height) return;
-      document.documentElement.style.setProperty(
-        "--footer-height",
-        `${rect.height + 16 * 2}px`,
-      );
-    });
-
-    observer.observe(ref.current);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
   return (
     <div
       className={cn(
-        "flex flex-col gap-2 w-full pt-4 fixed md:absolute left-0 bottom-0 bg-background",
+        "flex flex-col gap-2 w-full pt-4 left-0 bottom-0 bg-background",
         !showCatridgeLogo && "pb-4",
         className,
       )}

packages/keychain/src/components/slot/Consent.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Consent } from "./consent";
+
+const meta: Meta<typeof Consent> = {
+  title: "Slot/Consent",
+  component: Consent,
+  decorators: [(Story) => <Story />],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

packages/keychain/src/components/slot/consent.tsx

@@ -43,7 +43,6 @@ export function Consent() {
     >
       <Footer>
         <Button onClick={onSubmit}>approve</Button>
-
         <Button variant="secondary" onClick={onDeny}>
           deny
         </Button>

packages/ui-next/package.json

@@ -30,6 +30,7 @@
     "storybook": "storybook dev -p 6003",
     "storybook:build": "storybook build",
     "storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6007 --silent",
+    "test-storybook": "test-storybook",
     "test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6007 'pnpm test-storybook --url http://127.0.0.1:6007 -u'",
     "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6007 'pnpm test-storybook --url http://127.0.0.1:6007'"
   },

scripts/update-storybook-snapshot.sh

@@ -1,13 +1,22 @@
 #!/bin/bash
 
-# Run the container with all necessary options
+# Check for required arguments
+if [ "$#" -lt 2 ]; then
+  echo "Usage: $0 <package-name> <port>"
+  echo "Example: $0 @cartridge/keychain 6006"
+  exit 1
+fi
+
+PACKAGE=$1
+PORT=$2
+
+# Run the test updates in container
 docker run \
   --rm \
+  --network="host" \
   -v "$(pwd)":/app \
   -v /app/node_modules \
   --ipc=host \
+  -ti \
   ghcr.io/cartridge-gg/controller/storybook-env:sha-91a2d36 \
-  bash -c "
-    pnpm install --frozen-lockfile && \
-    pnpm test:storybook:update
-  "
+  bash -c "pnpm i && pnpm --filter $PACKAGE test-storybook -u --url http://host.docker.internal:$PORT"