From 604c308e5cfab8fd5e65c80b705706836955183a Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Thu, 4 Jun 2026 20:27:26 -0700
Subject: [PATCH] =?UTF-8?q?Mobile:=20downloads=20page=20(.adl-*)=20respons?=
 =?UTF-8?q?ive=20pass=20=E2=80=94=20had=20zero=20coverage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The downloads page is a two-column desktop layout (main list + fixed 366px batch
panel) with NO mobile rules at all. Phone-only:
- .adl-layout stacks to a column; .adl-batch-panel goes full-width, swaps its
  left border for a top border, and flows in the page (no independent scroll).
- .adl-header + .adl-controls stack so the filter pills get full width.
- .adl-filter-pills wrap instead of overflowing; cancel/clear buttons flex to fit.
---
 webui/static/mobile.css | 42 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/webui/static/mobile.css b/webui/static/mobile.css
index f8085cbc..049eb677 100644
--- a/webui/static/mobile.css
+++ b/webui/static/mobile.css
@@ -3474,3 +3474,45 @@
         width: 45%;
     }
 }
+
+@media (max-width: 768px) {
+    /* ── Downloads page (.adl-*) ──
+       Had ZERO mobile rules. Desktop is a two-column layout: the main list
+       (.adl-main, flex:1) + a fixed 366px batch panel with a left border that
+       scrolls independently. On a phone that doesn't fit — stack it. */
+    .adl-layout {
+        flex-direction: column;
+        gap: 16px;
+    }
+    .adl-batch-panel {
+        width: 100%;
+        flex-shrink: 1;
+        border-left: none;
+        border-top: 1px solid rgba(255, 255, 255, 0.06);
+        padding: 14px 4px 0;
+        overflow-y: visible;        /* grows in the page flow instead of own scroll */
+    }
+
+    /* Header: title + controls sat in one row; stack so the pills get full width. */
+    .adl-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+    }
+    .adl-title { font-size: 1.3rem; }
+    .adl-controls {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+    }
+    /* Filter pills (All / Active / Queued / Completed / Failed) + count +
+       Cancel All / Clear Completed: wrap instead of overflowing off-screen. */
+    .adl-filter-pills {
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+    .adl-pill { padding: 6px 12px; }
+    /* Action buttons full-width-friendly so they're tappable. */
+    .adl-cancel-all-btn,
+    .adl-clear-btn { flex: 1 1 auto; }
+}