From 6303d5ae6d36873f52fc9039dd12ac47c8f95c40 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Tue, 18 Aug 2026 05:53:56 +0000
Subject: [PATCH] Fix multicol layout pinning two fixed columns at narrow
 widths

The 78rem minimum on the center track prevented the article from ever
shrinking, locking long articles into two fixed-width columns that
overflowed the window. Drop the floor: the 4fr center share now scales
with the window in both directions, so column widths flex continuously
and the count falls to 1 when space runs out.
---
 frontend/src/assets/pagerite.css | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css
index f40f3e8..2fb8d8f 100644
--- a/frontend/src/assets/pagerite.css
+++ b/frontend/src/assets/pagerite.css
@@ -235,14 +235,15 @@ body {
 }
 
 /* Long articles (.multicol is added by pagerite.js based on content length)
-   lift the 78rem cap: the center track keeps 78rem as its minimum and then
-   takes a 4:1 share of any extra space against each gutter, so the article
-   grows without limit and its column count follows its width (see the
-   `columns: 30rem` rule below). The gutters stay symmetric, so the .wide
-   breakout math (50% − 50vw) still centers on the viewport — and at very
-   wide windows the gutters still hold the 12rem sidebar. */
+   lift the 78rem cap: the center track takes a 4:1 share of the window
+   against each gutter, growing and shrinking continuously — no minimum,
+   so the column count drops to 1 when space gets tight instead of
+   pinning an overflowing fixed width (see the `columns: 30rem` rule
+   below). The gutters stay symmetric, so the .wide breakout math
+   (50% − 50vw) still centers on the viewport — and at very wide windows
+   the gutters still hold the 12rem sidebar. */
 body:has(.multicol) #content {
-  grid-template-columns: minmax(0, 1fr) minmax(78rem, 4fr) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
 }
 
 body.editing #content {
@@ -709,12 +710,13 @@ article h2 {
     grid-template-columns: 12rem minmax(0, 78rem) minmax(0, 1fr);
   }
 
-  /* Long articles stay uncapped here too: same 12rem reservation for the
-     sidebar, but the center track keeps growing (see the .multicol rule
-     at #content). The article's left edge stays at 12rem either way, so
-     the constant .wide breakout margin below remains correct. */
+  /* Long articles stay fluid here too: same 12rem reservation for the
+     sidebar, but the center track scales with the window both ways (see
+     the .multicol rule at #content). The article's left edge stays at
+     12rem either way, so the constant .wide breakout margin below remains
+     correct. */
   body:has(#sidebar):has(.multicol):not(.editing) #content {
-    grid-template-columns: 12rem minmax(78rem, 4fr) minmax(0, 1fr);
+    grid-template-columns: 12rem minmax(0, 4fr) minmax(0, 1fr);
   }
 
   body:has(#sidebar) figure:has(.wide),