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" {