refactor(web): tweak layout

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>

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>;
 }

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 />

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 />