From e657aa5a725d9b76be62bbbdf93d9883ab520a26 Mon Sep 17 00:00:00 2001 From: Ricardo Date: Sun, 1 Feb 2026 17:25:49 +0100 Subject: [PATCH] fix: add overflow handling to prevent mobile layout breaking - Add grid-cols-1 explicitly for mobile to ensure single column layout - Add overflow-x-hidden to .main-content to contain horizontal overflow - Add overflow-hidden to .sidebar and .widget components - Add overflow-x-hidden to .e-content and .prose containers - Add overflow-hidden to .post-card for containing wide content These changes fix mobile layout regressions on pages using withSidebar: true Co-Authored-By: Claude Opus 4.5 --- css/tailwind.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/css/tailwind.css b/css/tailwind.css index 663aba0..2b13336 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -195,15 +195,15 @@ /* Layout with sidebar - mobile-first with responsive grid */ .layout-with-sidebar { - @apply grid gap-6 md:gap-8 lg:grid-cols-3; + @apply grid grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3; } .main-content { - @apply lg:col-span-2 min-w-0; /* min-w-0 prevents flex/grid overflow */ + @apply lg:col-span-2 min-w-0 overflow-x-hidden; /* min-w-0 + overflow-x-hidden prevents layout breaking */ } .sidebar { - @apply space-y-6 lg:sticky lg:top-24 lg:self-start; + @apply space-y-6 lg:sticky lg:top-24 lg:self-start overflow-hidden; } /* Main content area - adjust padding for mobile */ @@ -272,7 +272,7 @@ /* Widget cards */ .widget { - @apply p-4 bg-surface-100 dark:bg-surface-800 rounded-lg; + @apply p-4 bg-surface-100 dark:bg-surface-800 rounded-lg overflow-hidden; } .widget-title { @@ -281,7 +281,7 @@ /* Post cards */ .post-card { - @apply p-5 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm; + @apply p-5 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden; } .post-header { @@ -413,6 +413,13 @@ word-break: break-word; } + /* Content containers - prevent horizontal overflow */ + .e-content, + .prose { + @apply overflow-x-hidden; + max-width: 100%; + } + article { scroll-margin-top: 80px; /* Prevent header overlap when scrolling to anchors */ }