From 0c0b4c98cf5a67a657ef55f8843f7de0bd848274 Mon Sep 17 00:00:00 2001
From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com>
Date: Sat, 14 Jun 2025 15:22:16 -0500
Subject: [PATCH] refactor(web): tweak layout

---
 web/src/app/layout.tsx              | 9 ++++++---
 web/src/app/page.tsx                | 4 +---
 web/src/components/footer/index.tsx | 2 +-
 web/src/components/header.tsx       | 2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index a0a809b07..c880c2c2c 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -37,9 +37,12 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <Header />
-          <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-            {children}
+          <div
+            className="flex flex-col min-h-screen"
+            style={{ minHeight: "100dvh" }}
+          >
+            <Header />
+            <div className="flex-1 flex flex-col">{children}</div>
             <Footer />
           </div>
         </ThemeProvider>
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index ca3101058..c632b7816 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,5 +1,3 @@
 export default function Home() {
-  return (
-    <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"></main>
-  );
+  return <main className="p-8 gap-16 sm:p-20"></main>;
 }
diff --git a/web/src/components/footer/index.tsx b/web/src/components/footer/index.tsx
index 510b3dd5f..36d6634ea 100644
--- a/web/src/components/footer/index.tsx
+++ b/web/src/components/footer/index.tsx
@@ -4,7 +4,7 @@ import { ApiLink } from "./api-link";
 
 export function Footer() {
   return (
-    <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+    <footer className="flex flex-wrap items-center justify-center gap-2 sm:gap-[24px] mb-2 sm:mb-3 overflow-x-auto whitespace-nowrap">
       <CollinMBarrettLink />
       <ApiLink />
       <GitHubLink />
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
index 6f205d089..f3ba092f4 100644
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -3,7 +3,7 @@ import { ThemeToggle } from "./theme-toggle";
 export function Header() {
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-14 items-center">
+      <div className="container flex h-14 items-center px-2 sm:px-0">
         <div className="flex flex-1 items-center justify-end space-x-4">
           <nav className="flex items-center space-x-1">
             <ThemeToggle />