fix: resolve mobile viewport issues on blog posts

Clickin · Clickin · commit dee966959ec0 · 2026-02-23T12:58:46.000+09:00
- Remove 'break-keep' from main layout which could cause horizontal overflow in Korean text
- Fix Giscus 'contain-intrinsic-size' which was forcing a 640px minimum width
- Add horizontal scrolling to tables on mobile
- Ensure iframes and images are contained within the viewport
- Move CategorySidebar on blog posts to be visible as a carousel on mobile
diff --git a/src/components/CategorySidebar.astro b/src/components/CategorySidebar.astro
@@ -41,6 +41,17 @@ allPosts.forEach(post => {
 
 const sortedRootCategories = Object.values(tree).sort((a, b) => a.name.localeCompare(b.name));
 const totalPosts = allPosts.length;
+
+// Flatten tree for mobile carousel to show all categories
+const flattenedCategories: { name: string; fullPath: string; count: number; depth: number }[] = [];
+function flatten(node: CategoryNode, depth: number, parentName: string = "") {
+  const displayName = parentName ? `${parentName} > ${node.name}` : node.name;
+  flattenedCategories.push({ name: displayName, fullPath: node.fullPath, count: node.count, depth });
+  Object.values(node.children)
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .forEach(child => flatten(child, depth + 1, displayName));
+}
+sortedRootCategories.forEach(cat => flatten(cat, 0));
 ---
 
 <div class="category-sidebar">
@@ -57,13 +68,15 @@ const totalPosts = allPosts.length;
       >
         All ({totalPosts})
       </a>
-      {sortedRootCategories.map(cat => (
+      {flattenedCategories.map(cat => (
         <a
           href={`/blog/category/${cat.fullPath}`}
           class={`whitespace-nowrap px-4 py-1.5 rounded-full border text-sm transition-colors ${
-            activeCategoryPath === cat.fullPath || activeCategoryPath?.startsWith(`${cat.fullPath}/`)
+            activeCategoryPath === cat.fullPath
               ? "bg-[var(--color-accent)] border-[var(--color-accent)] text-white"
-              : "border-[var(--color-border)] text-[var(--color-text-secondary)]"
+              : activeCategoryPath?.startsWith(`${cat.fullPath}/`)
+                ? "border-[var(--color-accent)] text-[var(--color-accent)] bg-[var(--color-accent)]/5"
+                : "border-[var(--color-border)] text-[var(--color-text-secondary)]"
           }`}
         >
           {cat.name} ({cat.count})
diff --git a/src/components/Giscus.astro b/src/components/Giscus.astro
@@ -256,7 +256,7 @@ import { giscus } from "../site.config";
   <style>
     .giscus {
       content-visibility: auto;
-      contain-intrinsic-size: 640px;
+      contain-intrinsic-size: 100% 400px;
     }
 
     .giscus.giscus-loaded {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -66,7 +66,7 @@ const hasGaMeasurementId = typeof gaMeasurementId === "string" && gaMeasurementI
   </head>
   <body class="min-h-screen flex flex-col">
     <Header />
-    <main class={`${mainClass} flex-1 py-8 break-keep break-words`} data-pagefind-body>
+    <main class={`${mainClass} flex-1 py-8 break-words`} data-pagefind-body>
       <slot />
     </main>
     <footer class="container-blog py-8 text-center text-sm text-[var(--color-text-secondary)] border-t border-[var(--color-border)]">
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
@@ -20,6 +20,11 @@ const dateStr = post.data.date.toISOString().slice(0, 10);
 const updatedStr = post.data.updated ? post.data.updated.toISOString().slice(0, 10) : null;
 ---
 <BaseLayout title={post.data.title} description={post.data.description} ogImage={ogImage} mainClass="max-w-7xl mx-auto px-4 sm:px-6">
+  <!-- Mobile Category Navigation -->
+  <div class="lg:hidden mb-4">
+    <CategorySidebar activeCategoryPath={post.data.category.split(">").map(s => s.trim()).join("/")} />
+  </div>
+
   <div class="flex flex-col lg:flex-row gap-8 lg:gap-12 min-w-0">
     <!-- Left Sidebar: Categories (Hidden on mobile/tablet, shown on desktop) -->
     <aside class="hidden lg:block w-48 flex-shrink-0 sticky top-20 self-start">
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -43,6 +43,7 @@
 
   body {
     @apply bg-[var(--color-bg)] text-[var(--color-text)] font-sans antialiased;
+    max-width: 100%;
     transition:
       background-color 0.2s ease,
       color 0.2s ease;
@@ -115,6 +116,10 @@
     @apply rounded-lg my-6 max-w-full;
   }
 
+  article iframe {
+    @apply max-w-full;
+  }
+
   /* ── Code ── */
   code {
     @apply font-mono text-sm bg-[var(--color-bg-code)] px-1.5 py-0.5 rounded;
@@ -254,7 +259,7 @@
 
   /* ── Table ── */
   article table {
-    @apply w-full my-6 text-sm border-collapse;
+    @apply w-full my-6 text-sm border-collapse block overflow-x-auto;
   }
 
   article th {

Original file line number	Diff line number	Diff line change
`@@ -256,7 +256,7 @@ import { giscus } from "../site.config";`
`256`	`256`	`<style>`
`257`	`257`	`.giscus {`
`258`	`258`	`content-visibility: auto;`
`259`		`- contain-intrinsic-size: 640px;`
	`259`	`+ contain-intrinsic-size: 100% 400px;`
`260`	`260`	`}`
`261`	`261`
`262`	`262`	`.giscus.giscus-loaded {`