Skip to content

Commit dee9669

Browse files
committed
fix: resolve mobile viewport issues on blog posts
- 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
1 parent 7fc2c3a commit dee9669

5 files changed

Lines changed: 29 additions & 6 deletions

File tree

src/components/CategorySidebar.astro

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,17 @@ allPosts.forEach(post => {
4141
4242
const sortedRootCategories = Object.values(tree).sort((a, b) => a.name.localeCompare(b.name));
4343
const totalPosts = allPosts.length;
44+
45+
// Flatten tree for mobile carousel to show all categories
46+
const flattenedCategories: { name: string; fullPath: string; count: number; depth: number }[] = [];
47+
function flatten(node: CategoryNode, depth: number, parentName: string = "") {
48+
const displayName = parentName ? `${parentName} > ${node.name}` : node.name;
49+
flattenedCategories.push({ name: displayName, fullPath: node.fullPath, count: node.count, depth });
50+
Object.values(node.children)
51+
.sort((a, b) => a.name.localeCompare(b.name))
52+
.forEach(child => flatten(child, depth + 1, displayName));
53+
}
54+
sortedRootCategories.forEach(cat => flatten(cat, 0));
4455
---
4556

4657
<div class="category-sidebar">
@@ -57,13 +68,15 @@ const totalPosts = allPosts.length;
5768
>
5869
All ({totalPosts})
5970
</a>
60-
{sortedRootCategories.map(cat => (
71+
{flattenedCategories.map(cat => (
6172
<a
6273
href={`/blog/category/${cat.fullPath}`}
6374
class={`whitespace-nowrap px-4 py-1.5 rounded-full border text-sm transition-colors ${
64-
activeCategoryPath === cat.fullPath || activeCategoryPath?.startsWith(`${cat.fullPath}/`)
75+
activeCategoryPath === cat.fullPath
6576
? "bg-[var(--color-accent)] border-[var(--color-accent)] text-white"
66-
: "border-[var(--color-border)] text-[var(--color-text-secondary)]"
77+
: activeCategoryPath?.startsWith(`${cat.fullPath}/`)
78+
? "border-[var(--color-accent)] text-[var(--color-accent)] bg-[var(--color-accent)]/5"
79+
: "border-[var(--color-border)] text-[var(--color-text-secondary)]"
6780
}`}
6881
>
6982
{cat.name} ({cat.count})

src/components/Giscus.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ import { giscus } from "../site.config";
256256
<style>
257257
.giscus {
258258
content-visibility: auto;
259-
contain-intrinsic-size: 640px;
259+
contain-intrinsic-size: 100% 400px;
260260
}
261261

262262
.giscus.giscus-loaded {

src/layouts/BaseLayout.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const hasGaMeasurementId = typeof gaMeasurementId === "string" && gaMeasurementI
6666
</head>
6767
<body class="min-h-screen flex flex-col">
6868
<Header />
69-
<main class={`${mainClass} flex-1 py-8 break-keep break-words`} data-pagefind-body>
69+
<main class={`${mainClass} flex-1 py-8 break-words`} data-pagefind-body>
7070
<slot />
7171
</main>
7272
<footer class="container-blog py-8 text-center text-sm text-[var(--color-text-secondary)] border-t border-[var(--color-border)]">

src/pages/blog/[slug].astro

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ const dateStr = post.data.date.toISOString().slice(0, 10);
2020
const updatedStr = post.data.updated ? post.data.updated.toISOString().slice(0, 10) : null;
2121
---
2222
<BaseLayout title={post.data.title} description={post.data.description} ogImage={ogImage} mainClass="max-w-7xl mx-auto px-4 sm:px-6">
23+
<!-- Mobile Category Navigation -->
24+
<div class="lg:hidden mb-4">
25+
<CategorySidebar activeCategoryPath={post.data.category.split(">").map(s => s.trim()).join("/")} />
26+
</div>
27+
2328
<div class="flex flex-col lg:flex-row gap-8 lg:gap-12 min-w-0">
2429
<!-- Left Sidebar: Categories (Hidden on mobile/tablet, shown on desktop) -->
2530
<aside class="hidden lg:block w-48 flex-shrink-0 sticky top-20 self-start">

src/styles/global.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343

4444
body {
4545
@apply bg-[var(--color-bg)] text-[var(--color-text)] font-sans antialiased;
46+
max-width: 100%;
4647
transition:
4748
background-color 0.2s ease,
4849
color 0.2s ease;
@@ -115,6 +116,10 @@
115116
@apply rounded-lg my-6 max-w-full;
116117
}
117118

119+
article iframe {
120+
@apply max-w-full;
121+
}
122+
118123
/* ── Code ── */
119124
code {
120125
@apply font-mono text-sm bg-[var(--color-bg-code)] px-1.5 py-0.5 rounded;
@@ -254,7 +259,7 @@
254259

255260
/* ── Table ── */
256261
article table {
257-
@apply w-full my-6 text-sm border-collapse;
262+
@apply w-full my-6 text-sm border-collapse block overflow-x-auto;
258263
}
259264

260265
article th {

0 commit comments

Comments
 (0)