Fix content height

cartridge-gg · Jan 10, 2025 · 264e5c9 · 264e5c9
1 parent 8b6773d
commit 264e5c9
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/packages/keychain/src/components/layout/Content.tsx b/packages/keychain/src/components/layout/Content.tsx
@@ -1,5 +1,6 @@
 import { cn } from "@cartridge/ui-next";
 import { PropsWithChildren } from "react";
+
 export function Content({
   children,
   className,

diff --git a/packages/keychain/src/components/layout/container/index.tsx b/packages/keychain/src/components/layout/container/index.tsx
@@ -35,8 +35,8 @@ function ResponsiveWrapper({ children }: PropsWithChildren) {
   return (
     <>
       {/* for desktop */}
-      <div className="hidden md:flex flex-col items-center justify-center">
-        <div className="w-desktop border border-muted rounded-xl overflow-hidden flex flex-col relative">
+      <div className="hidden min-h-screen md:flex flex-col items-center justify-center">
+        <div className="w-desktop border border-muted rounded-xl flex flex-col relative overflow-hidden">
           {children}
         </div>
       </div>

diff --git a/packages/keychain/src/components/layout/footer/index.tsx b/packages/keychain/src/components/layout/footer/index.tsx
@@ -10,7 +10,10 @@ export function Footer({
   const ref = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (!ref.current) return;
+    if (!ref.current) {
+      document.documentElement.style.setProperty("--footer-height", "0px");
+      return;
+    }
 
     const observer = new ResizeObserver((entries) => {
       const rect = entries[0].contentRect;

diff --git a/packages/keychain/src/components/settings/index.tsx b/packages/keychain/src/components/settings/index.tsx
@@ -1,6 +1,6 @@
 import { GearIcon, Button } from "@cartridge/ui-next";
 import { useState } from "react";
-import { Container, Footer } from "@/components/layout";
+import { Container, Content, Footer } from "@/components/layout";
 import { Recovery } from "./Recovery";
 import { Delegate } from "./Delegate";
 import { useConnection } from "@/hooks/connection";
@@ -71,6 +71,7 @@ export function Settings() {
 
   return (
     <Container variant="compressed" title="Controller Settings" Icon={GearIcon}>
+      <Content />
       {/* <Content>
         <VStack gap="30px" w="full">
           <VStack>
@@ -158,6 +159,7 @@ export function Settings() {
           </VStack>
         </VStack>
       </Content> */}
+
       <Footer>
         <Button variant="secondary" onClick={logout}>
           Log out