From b08bc7b33d130938fb43b3e8d091d81b982c52b1 Mon Sep 17 00:00:00 2001
From: latte <latte@hiddenden.cafe>
Date: Sun, 26 Apr 2026 18:32:47 +0200
Subject: [PATCH] fix mobile layout: switch to flex-start on small screens

Pages used align-items: center with min-height: 100vh, which clips
content at the top on mobile when it exceeds the viewport height.
Override to flex-start at <=600px so content scrolls normally.
Also tightened nav gap/font-size on mobile to reduce wrapping.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/Nav.astro       | 3 ++-
 src/pages/404.astro            | 8 ++++++++
 src/pages/about.astro          | 4 ++++
 src/pages/blog/[...slug].astro | 4 ++++
 src/pages/blog/index.astro     | 4 ++++
 src/pages/blog/tag/[tag].astro | 4 ++++
 src/pages/index.astro          | 4 ++++
 src/pages/projects.astro       | 4 ++++
 src/pages/uses.astro           | 4 ++++
 9 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 20e28e8..e8e0f45 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -99,7 +99,8 @@ function isActive(href: string, current: string): boolean {
         }
 
         .nav-inner {
-            font-size: 0.8rem;
+            font-size: 0.75rem;
+            gap: 4px;
         }
     }
 </style>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index d25f62e..e556be5 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -118,6 +118,14 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     }
 
     @media (max-width: 600px) {
+        .not-found-page {
+            align-items: flex-start;
+        }
+
+        .container {
+            padding: var(--space-md);
+        }
+
         .error-code {
             font-size: 3rem;
         }
diff --git a/src/pages/about.astro b/src/pages/about.astro
index c15bdc9..d0d8588 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -413,6 +413,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index f47cbe4..a98b143 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -797,6 +797,10 @@ const readingTime = getReadingTime(post.body);
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index ab32b85..b4fc5d5 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -276,6 +276,10 @@ const previewPosts = posts.map((post) => ({
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }
diff --git a/src/pages/blog/tag/[tag].astro b/src/pages/blog/tag/[tag].astro
index fea83da..6cfccc0 100644
--- a/src/pages/blog/tag/[tag].astro
+++ b/src/pages/blog/tag/[tag].astro
@@ -351,6 +351,10 @@ const previewPosts = posts.map((post) => ({
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a5bd8e2..e5ee8cc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -448,6 +448,10 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
 
     /* Responsive */
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index e291d88..2c80798 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -286,6 +286,10 @@ function getPrimaryLink(project: Project): string | undefined {
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }
diff --git a/src/pages/uses.astro b/src/pages/uses.astro
index 322653f..85f32d9 100644
--- a/src/pages/uses.astro
+++ b/src/pages/uses.astro
@@ -538,6 +538,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }