From f9c312a99677baf3be82e5f09613bc6e152751fb Mon Sep 17 00:00:00 2001
From: intech <decaf-comfy-groin@duck.com>
Date: Thu, 6 Aug 2026 20:20:47 +0400
Subject: [PATCH] fix: size the module grid by its container, not the window

The package cards on /en/packages/ and /en/reference/ were squeezed to 221px
(200px at a 1280px window, where the longest package names broke across three
lines mid-word), while the same component on the home page looked right at
385px.

The grid asked a viewport media query how many columns to draw, but the two
usages sit in very different boxes: the home page gives it the full 1180px
section, the documentation pages put it inside the 688px content column. A wide
window therefore handed the narrow column a three-column grid.

The grid now answers to its own container. The thresholds are the container
widths the old viewport breakpoints worked out to, so the home page keeps the
layout it had -- verified identical at nine viewport widths from 1600 down to
375 -- while the documentation pages drop to two columns and 338px cards.

A scan of every page at four viewport widths found no other multi-column layout
inside the documentation column whose column count came from a viewport query;
the remaining narrow columns are all home-page sections in a 1180px box, where
they are intended.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .vitepress/theme/custom.css | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
index ecae533..fb78b5b 100644
--- a/.vitepress/theme/custom.css
+++ b/.vitepress/theme/custom.css
@@ -516,12 +516,37 @@
     text-transform: uppercase;
 }
 
+/* One component, two very different boxes: the home page gives it the full 1180px
+   section, while /en/packages/ and /en/reference/ put it inside the 688px documentation
+   column. A viewport media query cannot tell those apart -- on a wide window both asked
+   for three columns and the documentation copy got 200px cards, wrapping package names
+   mid-word -- so the grid answers to its own container instead. The thresholds are the
+   container widths the old viewport breakpoints worked out to, so the home page keeps
+   the layout it had: 612px is the width its old 640px breakpoint worked out to once the
+   section gutters are taken off, and 900px sits in the gap between the 852px and 976px
+   the section measures on either side of the old 960px one. */
+.module-groups {
+    container-type: inline-size;
+}
+
 .module-grid {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: 1fr;
     gap: 12px;
 }
 
+@container (min-width: 612px) {
+    .module-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@container (min-width: 900px) {
+    .module-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
 .module-card {
     position: relative;
     isolation: isolate;
@@ -778,8 +803,7 @@
         margin-top: 34px;
     }
 
-    .home-goal-grid,
-    .module-grid {
+    .home-goal-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
@@ -828,7 +852,6 @@
 
     .home-section__heading--split,
     .home-goal-grid,
-    .module-grid,
     .home-resources,
     .home-resources nav,
     .reference-routes {