svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 16:44:56 +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

17
css/tailwind.css
View File

@@ -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 */
}