From 7c8504d5935665a4aab2fb56cbbc5a09a8800e28 Mon Sep 17 00:00:00 2001
From: ScreenTinker <hello@screentinker.com>
Date: Tue, 21 Apr 2026 15:50:56 -0500
Subject: [PATCH] Mobile: grid + layout reflow (Commit 2/4)

- Dashboard stats row (.dash-stats-row): flex column on mobile
- Content-library toolbar: stack upload area + remote URL + YouTube boxes vertically
- Info grid: 1 col on mobile (was 2 col); device detail metadata reads cleaner
- Content grid: drop to 1 col below 480px (iPhone SE)
- Schedule controls: wrap, device select fills row
- Schedule calendar: already wrapped in overflow-x:auto, kept horizontal-scroll
  approach (future: dedicated mobile day-view)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/css/main.css                | 21 ++++++++++++++++++++-
 frontend/js/views/content-library.js |  2 +-
 frontend/js/views/dashboard.js       |  2 +-
 frontend/js/views/schedule.js        |  4 ++--
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/css/main.css b/frontend/css/main.css
index df19ee6..8adab0e 100644
--- a/frontend/css/main.css
+++ b/frontend/css/main.css
@@ -920,10 +920,29 @@ body {
   .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
   .device-grid { grid-template-columns: 1fr; }
   .content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
-  .info-grid { grid-template-columns: 1fr 1fr; }
+  .info-grid { grid-template-columns: 1fr; }
   .remote-container { flex-direction: column; }
   .remote-controls { width: 100%; flex-direction: row; flex-wrap: wrap; }
   .modal { width: 95vw; max-height: 90vh; overflow-y: auto; }
   .tabs { overflow-x: auto; }
   .tab { white-space: nowrap; }
+
+  /* Dashboard stats stack to single column */
+  .dash-stats-row { flex-direction: column; }
+  .dash-stats-row .info-card { flex: none; }
+
+  /* Content-library 3-up toolbar stacks vertically */
+  .content-toolbar { flex-direction: column; }
+  .content-toolbar > div[style*="width:320px"] { width: auto !important; }
+
+  /* Schedule controls: allow wrap and widen select to full row */
+  .schedule-controls { gap: 8px; }
+  .schedule-controls > select { flex: 1 1 100%; }
+  .schedule-controls > button,
+  .schedule-controls > span { flex: 0 1 auto; }
+}
+
+@media (max-width: 480px) {
+  .content-grid { grid-template-columns: 1fr; }
+  .assign-content-grid { grid-template-columns: 1fr 1fr; }
 }
diff --git a/frontend/js/views/content-library.js b/frontend/js/views/content-library.js
index 4b9605c..6d9a2a5 100644
--- a/frontend/js/views/content-library.js
+++ b/frontend/js/views/content-library.js
@@ -19,7 +19,7 @@ export function render(container) {
       </div>
     </div>
 
-    <div style="display:flex;gap:16px;margin-bottom:24px">
+    <div class="content-toolbar" style="display:flex;gap:16px;margin-bottom:24px">
       <div class="upload-area" id="uploadArea" style="flex:1;margin-bottom:0">
         <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
           <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
diff --git a/frontend/js/views/dashboard.js b/frontend/js/views/dashboard.js
index 1194c8c..bbfb349 100644
--- a/frontend/js/views/dashboard.js
+++ b/frontend/js/views/dashboard.js
@@ -167,7 +167,7 @@ export function render(container) {
         </button>
       </div>
     </div>
-    <div id="dashStats" style="display:flex;gap:12px;margin-bottom:16px"></div>
+    <div id="dashStats" class="dash-stats-row" style="display:flex;gap:12px;margin-bottom:16px"></div>
     <div style="display:flex;gap:12px;margin-bottom:16px;align-items:center">
       <input type="text" id="deviceSearch" class="input" placeholder="Search displays..." style="max-width:300px">
       <select id="deviceFilter" class="input" style="width:140px;background:var(--bg-input)">
diff --git a/frontend/js/views/schedule.js b/frontend/js/views/schedule.js
index bf8d266..aa4935c 100644
--- a/frontend/js/views/schedule.js
+++ b/frontend/js/views/schedule.js
@@ -28,8 +28,8 @@ export async function render(container) {
     <div class="page-header">
       <div><h1>Schedule <span class="help-tip" data-tip="Visual weekly calendar for content scheduling. Click Add Schedule to create time slots. Set recurrence for repeating content. Higher priority overrides lower. Device-level schedules override group-level.">?</span></h1><div class="subtitle">Content scheduling calendar</div></div>
     </div>
-    <div style="display:flex;gap:12px;margin-bottom:16px;align-items:center">
-      <select id="schedDevice" class="input" style="width:200px;background:var(--bg-input)">
+    <div class="schedule-controls" style="display:flex;gap:12px;margin-bottom:16px;align-items:center;flex-wrap:wrap">
+      <select id="schedDevice" class="input" style="width:200px;max-width:100%;background:var(--bg-input)">
         ${devices.map(d => `<option value="${esc(d.id)}">${esc(d.name)}</option>`).join('')}
       </select>
       <button class="btn btn-secondary btn-sm" id="prevWeek">&lt; Prev</button>