Optimize UI styling and layouts for mobile devices and small screens

2026-06-29 08:09:34 -04:00
parent d35a48bf64
commit 71f7b89099
3 changed files with 181 additions and 3 deletions
@@ -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;
+    }
+}