From e7752ad4ca5c14be641e52ebf8f6600a0f712d67 Mon Sep 17 00:00:00 2001
From: Falkan <falkan@openclaw.local>
Date: Tue, 17 Mar 2026 20:18:19 -0400
Subject: [PATCH] fix: results grid uses auto-fill minmax so columns scale with
 available space

---
 src/app.css | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app.css b/src/app.css
index 7086426..21760fc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -238,9 +238,13 @@
 }
 
 /* ── Results grid ──────────────────────────────────────────────────────────── */
-/* Responsive column count: 1 col mobile, 2 col tablet, 3 col desktop.        */
-/* Cards grow to fill available space (1fr). Column count is a minimum —      */
-/* more columns are fine if content allows.                                    */
+/* Responsive column count: minimum 1 col mobile, 2 col tablet, 3 col desktop.
+   Uses auto-fill + minmax so extra columns appear automatically when there's
+   room — floor(availableWidth / minCardWidth) columns at any given width.
+   minmax values chosen so the minimum column count is enforced at each breakpoint:
+     <480px  → 1 col min  (cards can be full-width)
+     ≥480px  → 2 col min  (minmax(220px) → ⌊480/220⌋ = 2)
+     ≥900px  → 3 col min  (minmax(280px) → ⌊900/280⌋ = 3)             */
 .results-grid {
   display: grid;
   grid-template-columns: 1fr;
@@ -250,13 +254,13 @@
 
 @media (min-width: 480px) {
   .results-grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   }
 }
 
 @media (min-width: 900px) {
   .results-grid {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   }
 }