changes

tools/ora_editor/templates/modals/mask_preview.html

@@ -1,71 +1,99 @@
 <!-- Mask preview modal for ORA Editor -->
 
 <div x-show="showMaskModal" @keydown.escape.window="closeMaskModal()" 
-     class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
-    <div class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 border border-gray-600" style="max-height: 90vh; display: flex; flex-direction: column;">
-        <div class="flex items-center justify-between mb-4">
-            <h2 class="text-xl font-bold">
-                Extracted Mask
-                <span x-show="tempMaskPaths.length > 1" class="text-sm font-normal text-gray-400 ml-2">
-                    (<span x-text="currentMaskIndex + 1"></span> / <span x-text="tempMaskPaths.length"></span>)
-                </span>
-            </h2>
-            <!-- View mode toggle -->
-            <div class="flex gap-2">
+     class="fixed inset-0 z-[50] pt-12 lg:pt-0">
+    <!-- Backdrop (allows clicks to close) -->
+    <div @click="closeMaskModal()" class="absolute inset-0 bg-black bg-opacity-75"></div>
+    
+    <!-- Close button (top right, above backdrop) -->
+    <button 
+        @click="closeMaskModal()"
+        class="absolute top-4 right-4 z-[51] bg-gray-700 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-xl min-h-[2.5rem] touch-manipulation lg:top-4"
+    >✕</button>
+    
+    <!-- Modal content - above backdrop, full screen on mobile, centered on desktop -->
+    <div class="absolute inset-0 pt-12 lg:pt-0 overflow-auto p-4 z-[51]">
+        <div class="max-w-2xl mx-auto h-full flex flex-col lg:bg-gray-800 lg:rounded-lg lg:p-6 lg:max-h-[90vh] lg:border lg:border-gray-600 lg:my-auto">
+            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 mb-4">
+                <h2 class="text-xl font-bold">
+                    Extracted Mask
+                    <span x-show="tempMaskPaths.length > 1" class="text-sm font-normal text-gray-400 ml-2">
+                        (<span x-text="currentMaskIndex + 1"></span> / <span x-text="tempMaskPaths.length"></span>)
+                    </span>
+                </h2>
+                <!-- View mode toggle -->
+                <div class="flex gap-2">
+                    <button 
+                        @click="maskViewMode = 'with-bg'"
+                        :class="maskViewMode === 'with-bg' ? 'bg-blue-600' : 'bg-gray-600'"
+                        class="px-3 py-2 rounded text-sm font-medium min-h-[2.5rem] touch-manipulation"
+                    >With Background</button>
+                    <button 
+                        @click="maskViewMode = 'masked-only'"
+                        :class="maskViewMode === 'masked-only' ? 'bg-green-600' : 'bg-gray-600'"
+                        class="px-3 py-2 rounded text-sm font-medium min-h-[2.5rem] touch-manipulation"
+                    >Masked Only</button>
+                </div>
+            </div>
+        
+        <div class="bg-gray-700 rounded mb-4 p-2 relative">
+            <!-- Navigation row (multiple masks) -->
+            <div x-show="tempMaskPaths.length > 1" class="flex items-center justify-between gap-2 mb-2">
                 <button 
-                    @click="maskViewMode = 'with-bg'"
-                    :class="maskViewMode === 'with-bg' ? 'bg-blue-600' : 'bg-gray-600'"
-                    class="px-3 py-1 rounded text-sm font-medium"
-                >With Background</button>
+                    @click="previousMask()"
+                    :disabled="currentMaskIndex <= 0"
+                    class="bg-gray-800 hover:bg-gray-600 disabled:bg-gray-700 rounded w-12 h-12 flex items-center justify-center text-2xl min-h-[3rem] touch-manipulation"
+                >←</button>
+                <span class="text-sm text-gray-300 font-bold">Mask <span x-text="currentMaskIndex + 1"></span> / <span x-text="tempMaskPaths.length"></span></span>
                 <button 
-                    @click="maskViewMode = 'masked-only'"
-                    :class="maskViewMode === 'masked-only' ? 'bg-green-600' : 'bg-gray-600'"
-                    class="px-3 py-1 rounded text-sm font-medium"
-                >Masked Only</button>
+                    @click="nextMask()"
+                    :disabled="currentMaskIndex >= tempMaskPaths.length - 1"
+                    class="bg-gray-800 hover:bg-gray-600 disabled:bg-gray-700 rounded w-12 h-12 flex items-center justify-center text-2xl min-h-[3rem] touch-manipulation"
+                >→</button>
+            </div>
+            
+            <!-- Image preview -->
+            <div class="relative bg-black rounded overflow-hidden" style="max-height: calc(100vh - 400px);">
+                <div class="flex items-center justify-center min-h-[200px]">
+                    <!-- Base image (shown in "with-bg" mode) -->
+                    <img 
+                        x-show="maskViewMode === 'with-bg'"
+                        :src="'/api/image/base?ora_path=' + encodeURIComponent(oraPath)"
+                        class="border border-gray-600"
+                        style="max-width: 100%; max-height: calc(100vh - 400px);"
+                    >
+                    <!-- Masked image (transparent where mask is black) -->
+                    <img 
+                        x-show="currentMaskPath"
+                        :src="'/api/image/masked?ora_path=' + encodeURIComponent(oraPath) + '&mask_path=' + encodeURIComponent(currentMaskPath)"
+                        class="border border-gray-600"
+                        :class="maskViewMode === 'with-bg' ? 'absolute inset-0' : ''"
+                        style="max-width: 100%; max-height: calc(100vh - 400px);"
+                    >
+                </div>
             </div>
         </div>
         
-        <div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 flex items-center justify-center p-4 relative" style="min-height: 300px; max-height: 50vh;">
-            <!-- Left arrow for multiple masks -->
+        <div class="flex gap-4 justify-end lg:flex lg:justify-end flex-col">
             <button 
-                x-show="tempMaskPaths.length > 1 && currentMaskIndex > 0"
-                @click="previousMask()"
-                class="absolute left-2 z-10 bg-gray-800 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-2xl"
-            >←</button>
-            
-            <div class="relative" style="max-width: 100%; max-height: calc(50vh - 2rem);">
-                <!-- Base image (shown in "with-bg" mode) -->
-                <img 
-                    x-show="maskViewMode === 'with-bg'"
-                    :src="'/api/image/base?ora_path=' + encodeURIComponent(oraPath)"
-                    class="border border-gray-600"
-                    style="max-width: 100%; max-height: calc(50vh - 2rem);"
-                >
-                <!-- Masked image (transparent where mask is black) -->
-                <img 
-                    x-show="currentMaskPath"
-                    :src="'/api/image/masked?ora_path=' + encodeURIComponent(oraPath) + '&mask_path=' + encodeURIComponent(currentMaskPath)"
-                    class="border border-gray-600"
-                    :class="maskViewMode === 'with-bg' ? 'absolute inset-0' : ''"
-                    style="max-width: 100%; max-height: calc(50vh - 2rem);"
-                >
-            </div>
-            
-            <!-- Right arrow for multiple masks -->
+                @click="useCurrentMask()" 
+                :disabled="isExtracting || !currentMaskPath" 
+                class="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
+            >Use This Mask</button>
             <button 
-                x-show="tempMaskPaths.length > 1 && currentMaskIndex < tempMaskPaths.length - 1"
-                @click="nextMask()"
-                class="absolute right-2 z-10 bg-gray-800 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-2xl"
-            >→</button>
-        </div>
-        
-        <div class="flex gap-4 justify-end">
-            <button @click="rerollMasks()" :disabled="isExtracting" class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-4 py-2 rounded transition flex items-center gap-2">
+                @click="rerollMasks()" 
+                :disabled="isExtracting" 
+                class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-4 py-2 rounded transition flex items-center justify-center gap-2 min-h-[2.5rem] touch-manipulation"
+            >
                 <span x-show="isExtracting" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
                 Re-roll
             </button>
-            <button @click="useCurrentMask()" :disabled="isExtracting || !currentMaskPath" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition">Use This Mask</button>
-            <button @click="closeMaskModal()" :disabled="isExtracting" class="bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded transition">Cancel</button>
+            <button 
+                @click="closeMaskModal()" 
+                :disabled="isExtracting" 
+                class="w-full bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
+            >Cancel</button>
+        </div>
         </div>
     </div>
 </div>