Update style.css

static/style.css

@@ -608,3 +608,99 @@ button#generate-btn:disabled {
 ::-webkit-scrollbar-thumb:hover {
     background: var(--text-secondary);
 }
+
+@media (max-width: 1024px) {
+    body {
+        overflow: auto;
+    }
+
+    .app-container {
+        flex-direction: column;
+        height: auto;
+        padding: 0.75rem 0.75rem 1.5rem;
+        gap: 0.75rem;
+    }
+
+    .sidebar {
+        width: 100%;
+        border-radius: 1rem;
+        max-height: 420px;
+        padding: 1.25rem;
+    }
+
+    .content-area {
+        flex: none;
+        width: 100%;
+        padding: 0;
+    }
+
+    .main-content {
+        padding: 0.5rem;
+    }
+
+    .image-display-area {
+        padding: 1.25rem;
+        min-height: 260px;
+    }
+
+    .canvas-toolbar {
+        bottom: 0.75rem;
+        right: 0.75rem;
+    }
+
+    .toolbar-info {
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+
+    .top-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+
+@media (max-width: 640px) {
+    .sidebar {
+        padding: 1rem;
+    }
+
+    .image-input-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .top-toolbar {
+        gap: 0.5rem;
+    }
+
+    .toolbar-generate {
+        width: 100%;
+        justify-content: flex-end;
+    }
+
+    .history-section {
+        height: auto;
+        padding: 0.75rem;
+    }
+
+    .gallery-grid {
+        gap: 0.5rem;
+    }
+
+    button#generate-btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .canvas-toolbar {
+        position: static;
+        margin-top: 1rem;
+    }
+
+    .image-display-area {
+        padding: 1rem;
+    }
+
+    .history-section .gallery-item {
+        max-height: 140px;
+    }
+}