fix mobile theme

static/modules/templateGallery.js

@@ -262,6 +262,9 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
         const controls = document.createElement('div');
         controls.className = 'template-gallery-controls';
 
+        const searchRow = document.createElement('div');
+        searchRow.className = 'template-gallery-search-row';
+
         const searchContainer = document.createElement('div');
         searchContainer.className = 'template-search-container';
         const searchInput = document.createElement('input');
@@ -285,7 +288,8 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
         });
 
         searchContainer.appendChild(searchInput);
-        controls.appendChild(searchContainer);
+        searchRow.appendChild(searchContainer);
+        controls.appendChild(searchRow);
 
         const modeSelect = document.createElement('select');
         modeSelect.className = 'template-mode-select';
@@ -305,7 +309,6 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
             currentMode = e.target.value;
             render();
         });
-        controls.appendChild(modeSelect);
 
         const categorySelect = document.createElement('select');
         categorySelect.className = 'template-category-select';
@@ -324,7 +327,6 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
             currentCategory = e.target.value;
             render();
         });
-        controls.appendChild(categorySelect);
 
         const favoritesToggle = document.createElement('button');
         favoritesToggle.type = 'button';
@@ -343,7 +345,12 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
             favoriteFilterActive = !favoriteFilterActive;
             render();
         });
-        controls.appendChild(favoritesToggle);
+        const filterRow = document.createElement('div');
+        filterRow.className = 'template-gallery-filter-row';
+
+        filterRow.appendChild(modeSelect);
+        filterRow.appendChild(categorySelect);
+        filterRow.appendChild(favoritesToggle);
 
         const userToggle = document.createElement('button');
         userToggle.type = 'button';
@@ -360,7 +367,7 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
             userTemplateFilterActive = !userTemplateFilterActive;
             render();
         });
-        controls.appendChild(userToggle);
+        filterRow.appendChild(userToggle);
 
         const createTemplateBtn = document.createElement('button');
         createTemplateBtn.className = 'template-create-btn';
@@ -377,7 +384,9 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
                 window.openCreateTemplateModal();
             }
         });
-        controls.appendChild(createTemplateBtn);
+        filterRow.appendChild(createTemplateBtn);
+
+        controls.appendChild(filterRow);
 
         header.appendChild(controls);
         container.appendChild(header);

static/style.css

@@ -1016,14 +1016,46 @@ button#generate-btn:disabled {
 
 .template-gallery-controls {
     display: flex;
+    flex-direction: column;
     gap: 0.75rem;
-    align-items: center;
-    flex-wrap: wrap;
 }
 
-.template-search-container {
+.template-gallery-search-row,
-    flex: 1;
+.template-gallery-filter-row {
-    min-width: 200px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.template-gallery-filter-row {
+    justify-content: flex-start;
+}
+
+.template-gallery-search-row {
+    width: 100%;
+}
+
+.template-gallery-search-row .template-search-container {
+    width: 100%;
+}
+
+@media (min-width: 1025px) {
+    .template-gallery-controls {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .template-gallery-search-row {
+        flex: 1 1 320px;
+    }
+
+    .template-gallery-filter-row {
+        flex: 0 1 auto;
+        justify-content: flex-end;
+        overflow: visible;
+    }
 }
 
 .template-search-input {
@@ -1267,16 +1299,6 @@ button#generate-btn:disabled {
         height: 120px;
     }
     
-    .template-gallery-controls {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .template-search-container,
-    .template-category-select {
-        width: 100%;
-        min-width: unset;
-    }
 }
 
 /* Spinner */
@@ -1344,7 +1366,9 @@ button#generate-btn:disabled {
 
     .image-display-area {
         padding: 1.25rem;
-        min-height: 260px;
+        min-height: 320px;
+        max-height: min(70vh, 520px);
+        flex: none;
     }
 
     .canvas-toolbar {
@@ -1361,6 +1385,39 @@ button#generate-btn:disabled {
         flex-direction: column;
         align-items: stretch;
     }
+
+    #template-gallery-state {
+        align-items: stretch;
+        justify-content: flex-start;
+    }
+
+    #template-gallery-state .template-gallery-container {
+        max-height: min(70vh, 520px);
+        min-height: 320px;
+    }
+
+    #template-gallery-state .template-gallery-container,
+    #template-gallery-state .template-card-grid {
+        min-height: 0;
+    }
+
+    .template-gallery-controls {
+        gap: 0.5rem;
+    }
+
+    .template-gallery-search-row {
+        order: 0;
+    }
+
+    .template-gallery-filter-row {
+        order: 1;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+    }
+
+    .template-gallery-filter-row > * {
+        flex: 0 0 auto;
+    }
 }
 
 @media (max-width: 640px) {