Lay sections out in a multi-column flow instead of one long column

pf.sh's rule listing made the page noticeably taller without using any
of the available width. Wrap each section in a .section block and the
whole set in a .cols container using CSS multi-column layout
(column-width: 380px) - sections flow left-to-right/top-to-bottom
across however many columns fit the window, each staying intact
(break-inside: avoid) rather than splitting a table mid-page.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

1 files changed, 7 insertions, 1 deletions

diff --git a/statuspage/render.sh b/statuspage/render.sh
index a5602f0..a7f23c4 100755
--- a/statuspage/render.sh
+++ b/statuspage/render.sh
@@ -123,7 +123,9 @@ END {
     print "body { background:#111; color:#ddd; font-family: monospace; padding: 2em; }"
     print "h1 { color: #6ff; margin-bottom: 0; }"
     print "h2 { color: #9cf; border-bottom: 1px solid #333; padding-bottom: 4px; }"
-    print "table { border-collapse: collapse; width: 100%; max-width: 600px; margin-bottom: 1.5em; }"
+    print ".cols { column-width: 380px; column-gap: 2.5em; }"
+    print ".section { break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%; vertical-align: top; margin-bottom: 1.5em; }"
+    print "table { border-collapse: collapse; width: 100%; }"
     print "td { padding: 6px 10px; border-bottom: 1px solid #222; }"
     print ".sq { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:6px; vertical-align:middle; }"
     print ".green { background:#3c3; }"
@@ -137,9 +139,11 @@ END {
     print "<h1>" htmlesc(host) "</h1>"
     print "<p class=\"dim\">updated " htmlesc(now) "</p>"
 
+    print "<div class=\"cols\">"
     for (i = 1; i <= norder; i++) {
         sect = order[i]
         if (!(sect in count)) continue
+        print "<div class=\"section\">"
         print "<h2>" htmlesc(sect) "</h2>"
         print "<table>"
         for (j = 1; j <= count[sect]; j++) {
@@ -147,7 +151,9 @@ END {
             print "<tr><td><span class=\"sq " sqclass(S[sect, j]) "\"></span>" htmlesc(L[sect, j]) "</td>" valcell "</tr>"
         }
         print "</table>"
+        print "</div>"
     }
+    print "</div>"
 
     print "</body>"
     print "</html>"