From 16c71242d2cd7e521031ddd0710dc5ed84425e2c Mon Sep 17 00:00:00 2001
From: phamhungd <phamhung.d@gmail.com>
Date: Fri, 21 Nov 2025 14:17:14 +0700
Subject: [PATCH] Update style.css

---
 static/style.css | 96 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)

diff --git a/static/style.css b/static/style.css
index 3975b88..e5c2d38 100644
--- a/static/style.css
+++ b/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;
+    }
+}