update

static/script.js

@@ -232,7 +232,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     loadGallery();
-    setupSidebarResizer(sidebar, resizeHandle);
+    initializeSidebarResizer(sidebar, resizeHandle);
 
     function setViewState(state) {
         placeholderState.classList.add('hidden');
@@ -320,6 +320,32 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    function initializeSidebarResizer(sidebar, handle) {
+        if (!sidebar || !handle) return;
+        const resizerQuery = window.matchMedia('(min-width: 1025px)');
+        let resizerCleanup = null;
+
+        const toggleResizer = () => {
+            if (resizerQuery.matches) {
+                if (!resizerCleanup) {
+                    resizerCleanup = setupSidebarResizer(sidebar, handle);
+                }
+            } else if (resizerCleanup) {
+                resizerCleanup();
+                resizerCleanup = null;
+                sidebar.style.width = '';
+            }
+        };
+
+        toggleResizer();
+        if (typeof resizerQuery.addEventListener === 'function') {
+            resizerQuery.addEventListener('change', toggleResizer);
+        }
+        if (typeof resizerQuery.addListener === 'function') {
+            resizerQuery.addListener(toggleResizer);
+        }
+    }
+
     function buildGenerateFormData(fields) {
         const formData = new FormData();
 
@@ -483,7 +509,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function setupSidebarResizer(sidebar, handle) {
-        if (!sidebar || !handle) return;
+        if (!sidebar || !handle) return null;
         let isResizing = false;
         let activePointerId = null;
 
@@ -508,21 +534,31 @@ document.addEventListener('DOMContentLoaded', () => {
             document.body.style.cursor = '';
         };
 
-        handle.addEventListener('pointerdown', (event) => {
+        const onPointerDown = (event) => {
             isResizing = true;
             activePointerId = event.pointerId;
             handle.setPointerCapture(activePointerId);
             document.body.style.cursor = 'ew-resize';
             event.preventDefault();
-        });
+        };
 
-        document.addEventListener('pointermove', (event) => {
+        const onPointerMove = (event) => {
             if (!isResizing) return;
             updateWidth(event.clientX);
-        });
+        };
 
+        handle.addEventListener('pointerdown', onPointerDown);
+        document.addEventListener('pointermove', onPointerMove);
         document.addEventListener('pointerup', stopResize);
         document.addEventListener('pointercancel', stopResize);
+
+        return () => {
+            stopResize();
+            handle.removeEventListener('pointerdown', onPointerDown);
+            document.removeEventListener('pointermove', onPointerMove);
+            document.removeEventListener('pointerup', stopResize);
+            document.removeEventListener('pointercancel', stopResize);
+        };
     }
 
 });

static/style.css

@@ -58,13 +58,14 @@ a:hover {
     width: 320px;
     background: var(--panel-backdrop);
     background-image: radial-gradient(circle at 20% -20%, rgba(251, 191, 36, 0.15), transparent 45%);
-    border-right: 1px solid var(--border-color);
+    /* border-right: 1px solid var(--border-color); */
+    border: 1px solid rgba(255, 255, 255, 0.08);
     display: flex;
     flex-direction: column;
     padding: 1.5rem;
     overflow-y: auto;
     flex-shrink: 0;
-    box-shadow: inset -1px 0 0 var(--border-color);
+    /* box-shadow: inset -1px 0 0 var(--border-color); */
     backdrop-filter: blur(24px);
     border-radius: 1rem;
 }
@@ -97,6 +98,30 @@ a:hover {
     min-height: 0;
 }
 
+@media (max-width: 1024px) {
+    .app-container {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .sidebar {
+        width: 100%;
+        border-radius: 1rem;
+        margin-bottom: 0;
+        min-height: calc(100vh - 3rem);
+        height: auto;
+    }
+
+    .sidebar-resize-handle {
+        display: none;
+    }
+
+    .content-area {
+        margin-left: 0;
+        margin-top: 0;
+    }
+}
+
 .toolbar-info-btn {
     border: 1px solid rgba(255, 255, 255, 0.2);
     background: rgba(255, 255, 255, 0.04);
@@ -429,7 +454,7 @@ button#generate-btn:disabled {
     gap: 1rem;
     color: var(--text-primary);
     border-radius: 1.25rem;
-    padding: 0.75rem;
+    /* padding: 0.75rem; */
     height: 100%;
     min-height: 0;
     overflow: hidden;

templates/index.html

@@ -41,8 +41,7 @@
 
                         <div class="input-group image-inputs">
                             <div class="image-input-header">
-                                <label>Reference Images (optional)</label>
+                                <label>Reference Images</label>
-                                <span>Drag & drop up to 16 files</span>
                             </div>
                             <div id="image-input-grid" class="image-input-grid" aria-live="polite"></div>
                         </div>