fix: resolve mobile viewport overflow on article pages

Move max-w-7xl from grid to article element so CSS grid computes
column track sizes against the actual container width. Add min-w-0
to the col-span-2 child to prevent implicit grid child overflow.
Simplify .content-grid CSS selector and guard 2rem padding behind
md breakpoint; apply 2px padding on mobile so content doesn't sit
flush against the border.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

3 files changed, 23 insertions, 7 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 7f86f08..8229271 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -729,15 +729,21 @@ html.theme-light body[data-page-kind="home"] #matrix-rain {
 }
 
 /* Content grid background — blocks rain under text, visible in gutters (single pages only) */
-.grid.md\:grid-cols-3.gap-8.max-w-7xl.content-grid {
+.content-grid {
   position: relative;
   z-index: 10;
   background-color: var(--bg);
-  padding: 2rem;
+  padding: 2px;
   border: 1px solid var(--border);
   box-shadow: 0 0 20px var(--accent-glow);
 }
 
+@media (min-width: 768px) {
+  .content-grid {
+    padding: 2rem;
+  }
+}
+
 /* Article list items — soft glow effect */
 article.border.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg {
   border-color: var(--border);
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 64be81a..fe44358 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -2036,6 +2036,10 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   width: 100%;
 }
 
+.min-w-0 {
+  min-width: 0px;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -2819,15 +2823,21 @@ html.theme-light body[data-page-kind="home"] #matrix-rain {
 
 /* Content grid background — blocks rain under text, visible in gutters (single pages only) */
 
-.grid.md\:grid-cols-3.gap-8.max-w-7xl.content-grid {
+.content-grid {
   position: relative;
   z-index: 10;
   background-color: var(--bg);
-  padding: 2rem;
+  padding: 2px;
   border: 1px solid var(--border);
   box-shadow: 0 0 20px var(--accent-glow);
 }
 
+@media (min-width: 768px) {
+  .content-grid {
+    padding: 2rem;
+  }
+}
+
 /* Article list items — soft glow effect */
 
 article.border.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg {
diff --git a/themes/danix-xyz-hacker/layouts/_default/single.html b/themes/danix-xyz-hacker/layouts/_default/single.html
index 62e4a64..7a1a069 100644
--- a/themes/danix-xyz-hacker/layouts/_default/single.html
+++ b/themes/danix-xyz-hacker/layouts/_default/single.html
@@ -1,8 +1,8 @@
 {{ define "main" }}
-<article class="mx-auto px-4 py-12">
-  <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto content-grid">
+<article class="mx-auto px-4 py-12 max-w-7xl">
+  <div class="grid md:grid-cols-3 gap-8 content-grid">
     <!-- Article section -->
-    <div class="md:col-span-2">
+    <div class="md:col-span-2 min-w-0">
       <!-- Top article navigation (articles only) -->
       {{ if eq .Section "articles" }}
       {{ partial "article-nav.html" (dict "page" . "variant" "top") }}