From c509ba7eb1fe72890d5c5bf293d914fcfd3f62b2 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Wed, 5 Aug 2026 14:13:58 +0100
Subject: [PATCH] =?UTF-8?q?style:=20responsive=20mobile=20UI=20=E2=80=94?=
 =?UTF-8?q?=202-col=20grid,=20full-width=20cards,=20stacked=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/style.css | 57 ++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/public/style.css b/public/style.css
index 0f3db16..52014bd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -182,12 +182,55 @@ body {
 .scan-results { margin-top: 12px; padding: 12px; background: var(--surface); border-radius: var(--radius); }
 
 /* ── Mobile ── */
-@media (max-width: 900px) {
-    .grid-4x2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
-    #camera-cards { grid-template-columns: 1fr; }
-}
-@media (max-width: 500px) {
-    .grid-4x2 { grid-template-columns: 1fr; }
+@media (max-width: 768px) {
+    /* Top bar: compact */
+    .topbar { padding: 8px 10px; gap: 8px; }
     .topbar h1 { font-size: 14px; }
-    .tab { padding: 4px 8px; font-size: 12px; }
+    .tab { padding: 5px 10px; font-size: 12px; }
+
+    /* Grid: 2 columns, auto-height rows */
+    .grid-4x2 {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: auto;
+        gap: 4px;
+        height: auto;
+    }
+    .grid-tile { aspect-ratio: 4/3; }
+    .tile-label { font-size: 10px; bottom: 3px; left: 4px; padding: 1px 5px; }
+
+    /* Settings: full-width cards */
+    #camera-cards { grid-template-columns: 1fr; }
+    .settings-toolbar { flex-direction: column; gap: 8px; }
+    .settings-toolbar button { width: 100%; }
+
+    /* Playback: stacked controls */
+    .playback-controls { flex-direction: column; gap: 8px; }
+    .preset-group { flex-wrap: wrap; }
+    .preset { padding: 6px 10px; font-size: 12px; }
+    .playback-controls select, .playback-controls input { width: 100%; }
+    .clip-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+
+    /* Clip player fullscreen on mobile */
+    .clip-player video { max-width: 100%; max-height: 60%; }
+
+    /* Tab panels: less padding */
+    .tab-panel { padding: 8px; }
+}
+
+@media (max-width: 400px) {
+    /* Single column grid on very small screens */
+    .grid-4x2 { grid-template-columns: 1fr; }
+    .grid-tile { aspect-ratio: 16/9; }
+
+    /* Minimal top bar */
+    .topbar { padding: 6px 8px; }
+    .topbar h1 { display: none; }
+    .tab { padding: 4px 8px; font-size: 11px; }
+
+    /* Clip thumbnails smaller */
+    .clip-thumb { height: 70px; }
+    .clip-card { padding: 6px; }
+
+    /* Wizard: stack inputs vertically */
+    #wiz-from, #wiz-to, #wiz-user, #wiz-pass { width: 100% !important; margin: 4px 0 !important; }
 }