From e22b43d58938ba7462dd02d1851970625b799a89 Mon Sep 17 00:00:00 2001
From: Frank <frank@dankware>
Date: Mon, 21 Sep 2026 14:30:21 -0700
Subject: [PATCH] homepage: sections are horizontal rows, not columns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each section's panels fill an auto-fill row (as many per row as the
viewport allows) and the sections stack vertically — the side-by-side
column layout was the wrong read of 'render the sections horizontally'.
---
 shared/homepage/style.css | 9 ++++-----
 tests/homepage_pages.bats | 5 +++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/shared/homepage/style.css b/shared/homepage/style.css
index 3b221d9..9131b35 100644
--- a/shared/homepage/style.css
+++ b/shared/homepage/style.css
@@ -49,10 +49,9 @@ body::before {
 .title { color: var(--head); }
 .summary { color: var(--dim); margin: 12px 0; letter-spacing: 0.05em; }
 
-/* Sections render side by side: one column per section, panels stacked
-   vertically inside. auto-fit wraps to fewer columns on narrow viewports. */
-.sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
-.section { min-width: 0; }
+/* Sections stack vertically; each section's panels fill a horizontal
+   auto-fill row (as many panels per row as the viewport allows). */
+.section { margin-bottom: 20px; }
 .section-title {
   color: var(--head);
   font-size: 1rem;
@@ -66,7 +65,7 @@ body::before {
 
 .grid {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 12px;
 }
 
diff --git a/tests/homepage_pages.bats b/tests/homepage_pages.bats
index 12608e0..3cd0c80 100644
--- a/tests/homepage_pages.bats
+++ b/tests/homepage_pages.bats
@@ -34,10 +34,11 @@ setup() {
     grep -q "SECTION_ORDER" "$BASE/app.js"
 }
 
-@test "sections render horizontally (one column per section)" {
+@test "sections render as horizontal rows of panels" {
     grep -q 'class="sections"' "$BASE/index.html"
     grep -q 'class="sections"' "$BASE/admin.html"
-    grep -q "repeat(auto-fit" "$BASE/style.css"
+    # Each section's panels fill an auto-fill row, not a single column.
+    grep -q "repeat(auto-fill" "$BASE/style.css"
 }
 
 @test "WIP badges distinguish open from closed work" {