From 17c03a59715756c72ec57b17d2f7402ff0080fec Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Tue, 30 Dec 2025 11:39:34 -0800
Subject: [PATCH] Refactor: Grid layout for Aspect Ratio and Resolution

---
 src/parts/modals.html | 38 ++++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/parts/modals.html b/src/parts/modals.html
index f0e0ede..ae18ac5 100644
--- a/src/parts/modals.html
+++ b/src/parts/modals.html
@@ -36,20 +36,30 @@
             <div><input id="set_hide_composer" type="checkbox" class="sr-only peer"><label for="set_hide_composer" class="inline-flex cursor-pointer items-center rounded-full border border-slate-300 bg-transparent py-0.5 px-3 text-xs text-slate-500 peer-checked:border-gray-300 peer-checked:bg-gray-200 peer-checked:text-slate-800">Hide composer</label></div>
             <div><input id="set_ignore_master_prompt" type="checkbox" class="sr-only peer"><label for="set_ignore_master_prompt" class="inline-flex cursor-pointer items-center rounded-full border border-slate-300 bg-transparent py-0.5 px-3 text-xs text-slate-500 peer-checked:border-gray-300 peer-checked:bg-gray-200 peer-checked:text-slate-800">Ignore master prompt</label></div>
           </div>
-          <div id="aspectRatioContainer" class="hidden pt-2">
-            <label class="block text-gray-700 font-medium mb-1 text-xs">Aspect Ratio</label>
-            <select id="set_aspect_ratio" class="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs">
-              <option value="1:1">1:1 (Square)</option>
-              <option value="2:3">2:3 (Portrait)</option>
-              <option value="3:2">3:2 (Landscape)</option>
-              <option value="3:4">3:4</option>
-              <option value="4:3">4:3</option>
-              <option value="4:5">4:5</option>
-              <option value="5:4">5:4</option>
-              <option value="9:16">9:16 (Story)</option>
-              <option value="16:9">16:9 (Cinematic)</option>
-              <option value="21:9">21:9 (Ultra-wide)</option>
-            </select>
+          <div id="aspectRatioContainer" class="hidden pt-2 grid grid-cols-2 gap-3">
+            <div>
+              <label class="block text-gray-700 font-medium mb-1 text-xs">Aspect Ratio</label>
+              <select id="set_aspect_ratio" class="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs">
+                <option value="1:1">1:1 (Square)</option>
+                <option value="2:3">2:3 (Portrait)</option>
+                <option value="3:2">3:2 (Landscape)</option>
+                <option value="3:4">3:4</option>
+                <option value="4:3">4:3</option>
+                <option value="4:5">4:5</option>
+                <option value="5:4">5:4</option>
+                <option value="9:16">9:16 (Story)</option>
+                <option value="16:9">16:9 (Cinematic)</option>
+                <option value="21:9">21:9 (Ultra-wide)</option>
+              </select>
+            </div>
+            <div>
+              <label class="block text-gray-700 font-medium mb-1 text-xs">Resolution</label>
+              <select id="set_image_size" class="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs">
+                <option value="1K">1K (Standard)</option>
+                <option value="2K">2K (High)</option>
+                <option value="4K">4K (Ultra)</option>
+              </select>
+            </div>
           </div>
         </div>
         <div id="panelPrompt" class="p-4 space-y-4 hidden">