svemagie.net/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-05-15 06:58:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: add overflow handling to prevent mobile layout breaking

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-02-01 17:25:49 +01:00
parent ed2044dd8b
commit e657aa5a72
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/tailwind.css
+12 -5
View File
@@ -195,15 +195,15 @@
/* Layout with sidebar - mobile-first with responsive grid */ /* Layout with sidebar - mobile-first with responsive grid */
.layout-with-sidebar { .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 { .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 { .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 */ /* Main content area - adjust padding for mobile */
@@ -272,7 +272,7 @@
/* Widget cards */ /* Widget cards */
.widget { .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 { .widget-title {
@@ -281,7 +281,7 @@
/* Post cards */ /* Post cards */
.post-card { .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 { .post-header {
@@ -413,6 +413,13 @@
word-break: break-word; word-break: break-word;
} }
/* Content containers - prevent horizontal overflow */
.e-content,
.prose {
@apply overflow-x-hidden;
max-width: 100%;
}
article { article {
scroll-margin-top: 80px; /* Prevent header overlap when scrolling to anchors */ scroll-margin-top: 80px; /* Prevent header overlap when scrolling to anchors */
} }