Don't use fixed footer

cartridge-gg · Jan 15, 2025 · 19891c9 · 19891c9
1 parent fee85b1
commit 19891c9
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 26 deletions.
diff --git a/packages/keychain/src/components/layout/Content.tsx b/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,
       )}
     >

diff --git a/packages/keychain/src/components/layout/footer/index.tsx b/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,
       )}

diff --git a/packages/keychain/src/components/slot/consent.tsx b/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>