From 71f7b890991c58f5f1bff3434a66cae3105e4060 Mon Sep 17 00:00:00 2001
From: David Kifer <dkifer19@gmail.com>
Date: Mon, 29 Jun 2026 08:09:34 -0400
Subject: [PATCH] Optimize UI styling and layouts for mobile devices and small
 screens

---
 static/app.js     |   2 +-
 static/index.html |   4 +-
 static/styles.css | 178 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 181 insertions(+), 3 deletions(-)

diff --git a/static/app.js b/static/app.js
index b174788..96c6ebb 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1934,7 +1934,7 @@ async function loadUploadsBrowser() {
             const fpsStr = entry.metadata ? `${entry.metadata.fps} FPS` : "-";
             
             item.innerHTML = `
-                <div style="display: flex; align-items: center; gap: 1rem; width: 100%;">
+                <div class="uploads-browser-item" style="width: 100%;">
                     <input type="checkbox" class="batch-select-checkbox" data-id="${entry.file_id}" style="width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary);">
                     <div class="queue-item-details" style="flex: 1;">
                         <div class="queue-item-title">
diff --git a/static/index.html b/static/index.html
index d5aa7d8..6525001 100644
--- a/static/index.html
+++ b/static/index.html
@@ -509,7 +509,7 @@
                     </div>
 
                     <!-- Action control -->
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem;">
+                    <div class="action-buttons-row">
                         <button type="button" id="back-to-workspace-btn" class="btn btn-secondary">
                             <i class="fa-solid fa-arrow-left"></i> Add Another Job
                         </button>
@@ -547,7 +547,7 @@
 
             <!-- Active Jobs & Queue Section -->
             <section class="queue-section glass-card" style="margin-top: 3rem;">
-                <div class="queue-header" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; margin-bottom: 1rem;">
+                <div class="queue-header">
                     <h2><i class="fa-solid fa-list-check"></i> Active Jobs & Pipeline Queue</h2>
                     <button type="button" id="refresh-queue-btn" class="btn btn-secondary btn-small">
                         <i class="fa-solid fa-arrows-rotate"></i> Refresh Queue
diff --git a/static/styles.css b/static/styles.css
index a87c204..afa6806 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1502,3 +1502,181 @@ body.theme-slate {
     gap: 0.5rem;
     flex-shrink: 0;
 }
+
+.queue-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+.action-buttons-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1.5rem;
+}
+
+/* 10. Mobile Responsiveness Optimization */
+@media (max-width: 768px) {
+    header {
+        flex-direction: column;
+        align-items: center;
+        gap: 1.5rem;
+        text-align: center;
+    }
+    
+    .logo-container {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    
+    .header-actions {
+        flex-direction: column;
+        gap: 0.75rem;
+        width: 100%;
+    }
+    
+    #docs-btn,
+    .theme-selector,
+    .gpu-badge {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .queue-header {
+        flex-direction: column;
+        align-items: stretch !important;
+        gap: 1rem;
+    }
+    
+    .queue-header button {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    #batch-config-bar {
+        flex-direction: column;
+        align-items: stretch !important;
+        gap: 0.75rem;
+        text-align: center;
+    }
+    
+    #batch-config-bar button {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .gallery-header {
+        flex-direction: column;
+        align-items: stretch !important;
+        gap: 1rem;
+    }
+    
+    .gallery-header div {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    
+    .gallery-header button {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .queue-item {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1.25rem;
+    }
+    
+    .queue-item-details {
+        margin-right: 0;
+    }
+    
+    .uploads-browser-item {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+    }
+    
+    .uploads-browser-item .batch-select-checkbox {
+        align-self: flex-start;
+    }
+    
+    .queue-item-status-bar {
+        width: 100%;
+        justify-content: space-between;
+    }
+    
+    .queue-item-progress-container {
+        flex: 1;
+        width: auto;
+    }
+    
+    .queue-item-actions {
+        width: 100%;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+    
+    .queue-item-actions button,
+    .queue-item-actions a {
+        flex: 1;
+        min-width: 80px;
+        justify-content: center;
+    }
+    
+    .action-buttons {
+        flex-direction: column;
+        width: 100%;
+    }
+    
+    .action-buttons .btn,
+    .action-buttons a {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .trim-inputs-row {
+        grid-template-columns: 1fr;
+    }
+    
+    .filter-checkboxes {
+        grid-template-columns: 1fr;
+    }
+    
+    .meta-grid,
+    .secondary-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .video-sync-controls {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.75rem;
+    }
+    
+    .time-scrubber-container {
+        width: 100%;
+    }
+    
+    .upload-area {
+        padding: 2.5rem 1rem;
+    }
+    
+    .action-buttons-row {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+        margin-top: 1.5rem;
+    }
+    
+    .action-buttons-row button {
+        width: 100%;
+        justify-content: center;
+    }
+}