From 6e85e2606df5aab5d9e97b0dae05ddb653b6cb24 Mon Sep 17 00:00:00 2001
From: "sas.fajri" <sas.fajri@gmail.com>
Date: Mon, 13 Apr 2026 16:58:39 +0700
Subject: [PATCH] Pack FPP selection into masonry columns

---
 styles.css | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/styles.css b/styles.css
index f98ad47..70f6a10 100644
--- a/styles.css
+++ b/styles.css
@@ -739,10 +739,8 @@ tr:last-child td {
 }
 
 .fpp-select-board {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 6px;
-  align-items: start;
+  column-count: 5;
+  column-gap: 6px;
 }
 
 .fpp-select-column {
@@ -751,6 +749,10 @@ tr:last-child td {
   background: rgba(255, 255, 255, 0.98);
   border: 1px solid rgba(15, 23, 42, 0.08);
   box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
+  break-inside: avoid;
+  display: inline-block;
+  width: 100%;
+  margin: 0 0 6px;
 }
 
 .fpp-select-head {
@@ -1219,7 +1221,7 @@ tr:last-child td {
   }
 
   .fpp-select-board {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    column-count: 4;
   }
 
   .fpp-sheet {
@@ -1274,7 +1276,7 @@ tr:last-child td {
   }
 
   .fpp-select-board {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-count: 2;
   }
 
   .fpp-sheet-head {
@@ -1363,7 +1365,7 @@ tr:last-child td {
   }
 
   .fpp-select-board {
-    grid-template-columns: 1fr;
+    column-count: 1;
   }
 
   .fpp-sheet {