ui change

static/script.js

@@ -256,14 +256,56 @@ function updateCustomSizeFromLastImage() {
         let width = lastDims.width;
         let height = lastDims.height;
         
-        if (width < 1000 && height < 1000) {
-            const scale = 1000 / Math.max(width, height);
-            width = Math.round(width * scale);
-            height = Math.round(height * scale);
+        // Calculate aspect ratio
+        const aspectRatio = width / height;
+        
+        // If both dimensions are less than 1024 (minimum allowed), scale up proportionally
+        if (width < 1024 && height < 1024) {
+            // Scale based on which dimension needs more scaling to reach 1024
+            if (width < height) {
+                // Height is larger, scale based on width minimum
+                width = 1024;
+                height = Math.round(1024 / aspectRatio);
+            } else {
+                // Width is larger or equal, scale based on height minimum
+                height = 1024;
+                width = Math.round(1024 * aspectRatio);
+            }
+        }
+        
+        // If any dimension exceeds 4096, scale down proportionally
+        if (width > 4096 || height > 4096) {
+            if (width > height) {
+                // Width exceeds more, scale based on width maximum
+                const scaleFactor = 4096 / width;
+                width = 4096;
+                height = Math.round(height * scaleFactor);
+            } else {
+                // Height exceeds more, scale based on height maximum
+                const scaleFactor = 4096 / height;
+                height = 4096;
+                width = Math.round(width * scaleFactor);
+            }
+        }
+        
+        // Final bounds check while maintaining aspect ratio
+        // If width is still below minimum after height-based scaling
+        if (width < 1024) {
+            const scaleFactor = 1024 / width;
+            width = 1024;
+            height = Math.round(height * scaleFactor);
+        }
+        
+        // If height is still below minimum after width-based scaling
+        if (height < 1024) {
+            const scaleFactor = 1024 / height;
+            height = 1024;
+            width = Math.round(width * scaleFactor);
         }
         
-        width = Math.max(1024, Math.min(4096, width));
-        height = Math.max(1024, Math.min(4096, height));
+        // Final check to ensure we don't exceed maximums
+        width = Math.min(4096, width);
+        height = Math.min(4096, height);
         
         document.getElementById('customWidth').value = width;
         document.getElementById('customHeight').value = height;

static/style.css

@@ -140,11 +140,41 @@ body {
     display: block;
 }
 
-/* Results Grid */
-.results-grid, .history-grid {
+/* Results Grid - Large images for current generation */
+.results-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    align-items: center;
+}
+
+.results-grid .generation-item {
+    width: 100%;
+    max-width: 800px;
+    min-height: 400px;
+}
+
+.results-grid .generation-item img {
+    width: 100%;
+    height: auto;
+    max-height: 600px;
+    object-fit: contain;
+}
+
+/* History Grid - Smaller thumbnails */
+.history-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 15px;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 12px;
+}
+
+.history-grid .generation-item {
+    max-height: 250px;
+}
+
+.history-grid .generation-item img {
+    max-height: 200px;
+    object-fit: cover;
 }
 
 .generation-item {