From 156a0b83d64c8caa29ce207b1cc43c0784768840 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ai-chan-0411=20=28=E8=97=8D=29?= <aoikabu12@gmail.com>
Date: Sun, 12 Apr 2026 09:07:16 +0900
Subject: [PATCH] fix: stick footer to bottom on short pages (closes #58)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use flex column layout on <main> with min-h-screen so the footer
always stays at the bottom of the viewport. On long pages the footer
scrolls naturally after the content.

- Add flex flex-col to <main className="min-h-screen">
- Add flex-1 w-full to the main content wrapper div

Signed-off-by: Ai-chan-0411 (藍) <aoikabu12@gmail.com>
---
 app/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index a1b5596..da46309 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -65,7 +65,7 @@ export default function HomePage() {
     console.log("Swapped users", data);
   };
   return (
-    <main className="min-h-screen">
+    <main className="min-h-screen flex flex-col">
       {" "}
       <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-16 max-w-7xl items-center justify-between m-auto px-4">
@@ -74,10 +74,10 @@ export default function HomePage() {
               DevImpact
             </span>
           </div>
-       
+
         </div>
       </header>
-      <div className="max-w-6xl mx-auto px-4 py-10 space-y-6">
+      <div className="flex-1 max-w-6xl mx-auto px-4 py-10 space-y-6 w-full">
         <CompareForm
           onSubmit={handleCompare}
           loading={loading}