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>

1 files changed, 12 insertions, 2 deletions

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 {