From 264e5c954ec2cd7a82b194242023772f1bbd4329 Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 10 Jan 2025 19:09:48 +0900
Subject: [PATCH] Fix content height

---
 packages/keychain/src/components/layout/Content.tsx         | 1 +
 packages/keychain/src/components/layout/container/index.tsx | 4 ++--
 packages/keychain/src/components/layout/footer/index.tsx    | 5 ++++-
 packages/keychain/src/components/settings/index.tsx         | 4 +++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/keychain/src/components/layout/Content.tsx b/packages/keychain/src/components/layout/Content.tsx
index 74eed55c2..84882b37d 100644
--- 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
index 6af72b086..a2a8ab1a1 100644
--- 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
index 292d22592..357e09619 100644
--- 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
index 04c048595..7dee880eb 100644
--- 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