From f97879b642a6a8daa30322a176bc8104c6b6f8df Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Tue, 18 Nov 2025 19:28:32 +0100
Subject: [PATCH] [FEAT] Improved modals

---
 README.md                          |   4 +-
 package-lock.json                  |  68 ++++-----
 public/CHANGELOG.md                |   3 +
 src/components/SpritePreview.vue   | 224 ++++++++++++++++-------------
 src/components/utilities/Modal.vue |   6 +-
 5 files changed, 166 insertions(+), 139 deletions(-)

diff --git a/README.md b/README.md
index 1d0c8a6..cd094fb 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# spritesheetgen
+# Spritesheet generator
 
-This template should help get you started developing with Vue 3 in Vite.
+This repository contains the source code of [Spritesheetgenerator](https://spritesheetgenerator.online)
 
 ## Recommended IDE Setup
 
diff --git a/package-lock.json b/package-lock.json
index ed24a3d..5a6879d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1949,9 +1949,9 @@
       }
     },
     "node_modules/@tsconfig/node22": {
-      "version": "22.0.4",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node22/-/node22-22.0.4.tgz",
-      "integrity": "sha512-GI0gtqW+8Bz9UMOsOO1z3w1ebspOkVjSyeJ18r96LW82OOZenpzWXti/+f/MgPy1hqXTIRXn8QpGIOYHgKkTnQ==",
+      "version": "22.0.5",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node22/-/node22-22.0.5.tgz",
+      "integrity": "sha512-hLf2ld+sYN/BtOJjHUWOk568dvjFQkHnLNa6zce25GIH+vxKfvTgm3qpaH6ToF5tu/NN0IH66s+Bb5wElHrLcw==",
       "dev": true,
       "license": "MIT"
     },
@@ -2148,23 +2148,23 @@
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "7.7.8",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.8.tgz",
-      "integrity": "sha512-BtFcAmDbtXGwurWUFf8ogIbgZyR+rcVES1TSNEI8Em80fD8Anu+qTRN1Fc3J6vdRHlVM3fzPV1qIo+B4AiqGzw==",
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-kit": "^7.7.8"
+        "@vue/devtools-kit": "^7.7.9"
       }
     },
     "node_modules/@vue/devtools-core": {
-      "version": "7.7.8",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.7.8.tgz",
-      "integrity": "sha512-EVLQTYML/v77JFA3Q8zvVANCvEv1WtG0TMo+HQR5eZ7PpEzSmVbEcBp2C1/OXyn8EJO4mHEeParMLpp43prUOw==",
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.7.9.tgz",
+      "integrity": "sha512-48jrBSwG4GVQRvVeeXn9p9+dlx+ISgasM7SxZZKczseohB0cBz+ITKr4YbLWjmJdy45UHL7UMPlR4Y0CWTRcSQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-kit": "^7.7.8",
-        "@vue/devtools-shared": "^7.7.8",
+        "@vue/devtools-kit": "^7.7.9",
+        "@vue/devtools-shared": "^7.7.9",
         "mitt": "^3.0.1",
         "nanoid": "^5.1.0",
         "pathe": "^2.0.3",
@@ -2194,12 +2194,12 @@
       }
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "7.7.8",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.8.tgz",
-      "integrity": "sha512-4Y8op+AoxOJhB9fpcEF6d5vcJXWKgHxC3B0ytUB8zz15KbP9g9WgVzral05xluxi2fOeAy6t140rdQ943GcLRQ==",
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-shared": "^7.7.8",
+        "@vue/devtools-shared": "^7.7.9",
         "birpc": "^2.3.0",
         "hookable": "^5.5.3",
         "mitt": "^3.0.1",
@@ -2209,9 +2209,9 @@
       }
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "7.7.8",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.8.tgz",
-      "integrity": "sha512-XHpO3jC5nOgYr40M9p8Z4mmKfTvUxKyRcUnpBAYg11pE78eaRFBKb0kG5yKLroMuJeeNH9LWmKp2zMU5LUc7CA==",
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
       "license": "MIT",
       "dependencies": {
         "rfdc": "^1.4.1"
@@ -2377,9 +2377,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.28",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.28.tgz",
-      "integrity": "sha512-gYjt7OIqdM0PcttNYP2aVrr2G0bMALkBaoehD4BuRGjAOtipg0b6wHg1yNL+s5zSnLZZrGHOw4IrND8CD+3oIQ==",
+      "version": "2.8.29",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.29.tgz",
+      "integrity": "sha512-sXdt2elaVnhpDNRDz+1BDx1JQoJRuNk7oVlAlbGiFkLikHCAQiccexF/9e91zVi6RCgqspl04aP+6Cnl9zRLrA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -2587,9 +2587,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.2.tgz",
-      "integrity": "sha512-D80T+tiqkd/8B0xNlbstWDG4x6aqVfO52+OlSUNIdkTvmNw0uQpJLeos2J/2XvpyidAFuTPmpad+tUxLndwj6g==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
     "node_modules/de-indent": {
@@ -2670,9 +2670,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.254",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.254.tgz",
-      "integrity": "sha512-DcUsWpVhv9svsKRxnSCZ86SjD+sp32SGidNB37KpqXJncp1mfUgKbHvBomE89WJDbfVKw1mdv5+ikrvd43r+Bg==",
+      "version": "1.5.255",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.255.tgz",
+      "integrity": "sha512-Z9oIp4HrFF/cZkDPMpz2XSuVpc1THDpT4dlmATFlJUIBVCy9Vap5/rIXsASP1CscBacBqhabwh8vLctqBwEerQ==",
       "dev": true,
       "license": "ISC"
     },
@@ -4817,15 +4817,15 @@
       }
     },
     "node_modules/vite-plugin-vue-devtools": {
-      "version": "7.7.8",
-      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.7.8.tgz",
-      "integrity": "sha512-04jowFsal5f9Gbso0X5Ff/mtvik7VP/PBYcKDCQHnTLH0x+juWSj7v1QJfDtXnWrrxU7/yrljEP8KZTm4skvkg==",
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.7.9.tgz",
+      "integrity": "sha512-08DvePf663SxqLFJeMVNW537zzVyakp9KIrI2K7lwgaTqA5R/ydN/N2K8dgZO34tg/Qmw0ch84fOKoBtCEdcGg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-core": "^7.7.8",
-        "@vue/devtools-kit": "^7.7.8",
-        "@vue/devtools-shared": "^7.7.8",
+        "@vue/devtools-core": "^7.7.9",
+        "@vue/devtools-kit": "^7.7.9",
+        "@vue/devtools-shared": "^7.7.9",
         "execa": "^9.5.2",
         "sirv": "^3.0.1",
         "vite-plugin-inspect": "0.8.9",
diff --git a/public/CHANGELOG.md b/public/CHANGELOG.md
index 1219270..0ff6c6b 100644
--- a/public/CHANGELOG.md
+++ b/public/CHANGELOG.md
@@ -1,5 +1,8 @@
 All notable changes to this project will be documented in this file.
 
+## [1.6.0] - 2025-11-18
+- Improved animation preview modal
+
 ## [1.5.0] - 2025-11-17
 - Show offset values in sprite cells and in preview modal
 - Modal stays on correct position
diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index 95f25d4..cacb34f 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -1,137 +1,157 @@
 <template>
   <div class="spritesheet-preview w-full">
-    <!-- Controls Container -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
-      <div class="flex flex-col gap-4 sm:flex-row sm:flex-wrap">
-        <!-- Playback Controls -->
-        <div class="flex items-center gap-2">
-          <div class="space-y-2">
-            <button @click="togglePlayback" class="flex items-center gap-1.5 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition-colors w-full cursor-pointer">
-              <span v-if="isPlaying" class="flex items-center gap-1.5">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                  <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H15a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd" />
-                </svg>
-                <span class="hidden sm:inline">Pause</span>
-              </span>
-              <span v-else class="flex items-center gap-1.5">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                  <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" />
-                </svg>
-                <span class="hidden sm:inline">Play</span>
-              </span>
-            </button>
+    <!-- Main Layout: Canvas Left, Controls Right -->
+    <div class="flex flex-col lg:flex-row gap-4">
+      <!-- Canvas Area (Left/Main) -->
+      <div class="flex-1 min-w-0">
+        <div class="relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-auto min-h-[300px] sm:min-h-[520px] shadow-sm hover:shadow-md transition-shadow duration-200">
+          <canvas
+            ref="previewCanvasRef"
+            @mousedown="startDrag"
+            @mousemove="drag"
+            @mouseup="stopDrag"
+            @mouseleave="stopDrag"
+            @touchstart="handleTouchStart"
+            @touchmove="handleTouchMove"
+            @touchend="stopDrag"
+            class="block touch-manipulation"
+            :class="{ 'cursor-move': isDraggable }"
+            :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left', ...(settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}) }"
+          >
+          </canvas>
 
-            <div class="flex items-center gap-1">
-              <button @click="previousFrame" class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 p-2 rounded-md transition-colors duration-200 w-full cursor-pointer" :disabled="isPlaying" :class="{ 'opacity-50 cursor-not-allowed': isPlaying }">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mx-auto dark:text-gray-200">
+          <!-- Mobile zoom controls -->
+          <div class="absolute bottom-3 right-3 flex space-x-2 lg:hidden bg-white/80 dark:bg-gray-800/80 p-2 rounded-lg shadow-md">
+            <button @click="increaseZoom" class="p-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg transition-colors">
+              <i class="fas fa-plus"></i>
+            </button>
+            <button @click="decreaseZoom" class="p-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg transition-colors">
+              <i class="fas fa-minus"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Controls Sidebar (Right) -->
+      <div class="lg:w-80 xl:w-96 flex-shrink-0">
+        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-4">
+          <!-- Playback Controls -->
+          <div class="space-y-3">
+            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Playback</h3>
+            <div class="flex items-center gap-2">
+              <button @click="togglePlayback" class="flex items-center justify-center gap-1.5 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition-colors cursor-pointer flex-1">
+                <span v-if="isPlaying" class="flex items-center gap-1.5">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
+                    <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H15a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd" />
+                  </svg>
+                  Pause
+                </span>
+                <span v-else class="flex items-center gap-1.5">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
+                    <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" />
+                  </svg>
+                  Play
+                </span>
+              </button>
+              <button @click="previousFrame" class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 p-2 rounded-md transition-colors duration-200 cursor-pointer" :disabled="isPlaying" :class="{ 'opacity-50 cursor-not-allowed': isPlaying }">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 dark:text-gray-200">
                   <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 01.75.75v12.06l4.72-4.72a.75.75 0 111.06 1.06l-6 6a.75.75 0 01-1.06 0l-6-6a.75.75 0 011.06-1.06l4.72 4.72V5.97a.75.75 0 01.75-.75z" clip-rule="evenodd" transform="rotate(90 12 12)" />
                 </svg>
               </button>
-              <button @click="nextFrame" class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 p-2 rounded-md transition-colors duration-200 w-full cursor-pointer" :disabled="isPlaying" :class="{ 'opacity-50 cursor-not-allowed': isPlaying }">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mx-auto dark:text-gray-200">
+              <button @click="nextFrame" class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 p-2 rounded-md transition-colors duration-200 cursor-pointer" :disabled="isPlaying" :class="{ 'opacity-50 cursor-not-allowed': isPlaying }">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 dark:text-gray-200">
                   <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 01.75.75v12.06l4.72-4.72a.75.75 0 111.06 1.06l-6 6a.75.75 0 01-1.06 0l-6-6a.75.75 0 011.06-1.06l4.72 4.72V5.97a.75.75 0 01.75-.75z" clip-rule="evenodd" transform="rotate(-90 12 12)" />
                 </svg>
               </button>
             </div>
+          </div>
 
-            <!-- Checkboxes -->
-            <div class="flex flex-wrap gap-4 items-center">
+          <!-- Sliders -->
+          <div class="space-y-3">
+            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Controls</h3>
+
+            <!-- Frame Navigation -->
+            <div class="space-y-1">
+              <div class="flex justify-between items-center">
+                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Frame</span>
+                <span class="text-xs font-mono text-gray-700 dark:text-gray-300">{{ visibleFrameNumber }}/{{ visibleFramesCount }}</span>
+              </div>
+              <input type="range" min="0" :max="visibleFrames.length - 1" :value="visibleFrameIndex" @input="handleSliderInput" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" />
+            </div>
+
+            <!-- FPS Control -->
+            <div class="space-y-1">
+              <div class="flex justify-between items-center">
+                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">FPS</span>
+                <span class="text-xs font-mono text-gray-700 dark:text-gray-300">{{ fps }}</span>
+              </div>
+              <input type="range" min="1" max="60" v-model.number="fps" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500" />
+            </div>
+
+            <!-- Zoom Control -->
+            <div class="space-y-1">
+              <div class="flex justify-between items-center">
+                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Zoom</span>
+                <span class="text-xs font-mono text-gray-700 dark:text-gray-300">{{ Math.round(zoom * 100) }}%</span>
+              </div>
+              <input type="range" min="0.5" max="5" step="0.1" v-model.number="zoom" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500" />
+            </div>
+          </div>
+
+          <!-- Options -->
+          <div class="space-y-3">
+            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Options</h3>
+            <div class="space-y-2">
               <label class="flex items-center gap-2 cursor-pointer">
                 <input type="checkbox" v-model="isDraggable" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" />
-                <span class="text-sm whitespace-nowrap dark:text-gray-200">Reposition</span>
+                <span class="text-sm dark:text-gray-200">Reposition</span>
               </label>
 
               <label class="flex items-center gap-2 cursor-pointer">
                 <input type="checkbox" v-model="showAllSprites" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" />
-                <span class="text-sm whitespace-nowrap dark:text-gray-200">Compare sprites</span>
+                <span class="text-sm dark:text-gray-200">Compare sprites</span>
               </label>
 
               <label class="flex items-center gap-2 cursor-pointer">
                 <input type="checkbox" v-model="settingsStore.pixelPerfect" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" @change="drawPreviewCanvas" />
-                <span class="text-sm whitespace-nowrap dark:text-gray-200">Pixel perfect</span>
+                <span class="text-sm dark:text-gray-200">Pixel perfect</span>
               </label>
             </div>
           </div>
-        </div>
-        <!-- Frame Controls -->
-        <div class="flex-1 min-w-[200px] space-y-6">
-          <!-- Frame Navigation -->
-          <div class="flex items-center gap-2">
-            <span class="text-sm font-medium w-30 dark:text-gray-200">Frame {{ visibleFrameNumber }}/{{ visibleFramesCount }}</span>
-            <input type="range" min="0" :max="visibleFrames.length - 1" :value="visibleFrameIndex" @input="handleSliderInput" class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" />
+
+          <!-- Current frame offset display -->
+          <div v-if="props.sprites[currentFrameIndex]" class="p-2 bg-gray-100 dark:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600">
+            <div class="flex items-center justify-between">
+              <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Offset</span>
+              <span class="text-xs font-mono font-semibold text-cyan-600 dark:text-cyan-400">x: {{ props.sprites[currentFrameIndex].x }}, y: {{ props.sprites[currentFrameIndex].y }}</span>
+            </div>
           </div>
 
-          <!-- FPS Control -->
-          <div class="flex items-center gap-2">
-            <span class="text-sm font-medium w-30 dark:text-gray-200">FPS: {{ fps }}</span>
-            <input type="range" min="1" max="60" v-model.number="fps" class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500" />
-          </div>
-
-          <!-- Zoom Control -->
-          <div class="flex items-center gap-2">
-            <span class="text-sm font-medium w-30 dark:text-gray-200">{{ Math.round(zoom * 100) }}%</span>
-            <input type="range" min="0.5" max="5" step="0.1" v-model.number="zoom" class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500" />
-          </div>
-        </div>
-      </div>
-
-      <div v-if="showAllSprites" class="w-full mt-3">
-        <div class="flex items-center mb-2">
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">Select visible frames:</label>
-          <div class="ml-auto flex gap-2">
-            <button @click="showAllFrames" class="px-2 py-1 text-sm bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors">Show All</button>
-            <button @click="hideAllFrames" class="px-2 py-1 text-sm bg-gray-500 hover:bg-gray-600 text-white rounded-md transition-colors">Hide All</button>
-          </div>
-        </div>
-        <div class="w-full rounded-md border border-gray-300 dark:border-gray-600 shadow-sm focus-within:ring-1 focus-within:ring-blue-500 focus-within:border-blue-500 dark:bg-gray-800">
-          <div class="max-h-[200px] overflow-y-auto">
-            <div class="grid grid-cols-2 gap-2">
-              <div v-for="(sprite, index) in props.sprites" :key="sprite.id" class="flex items-center gap-3 px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer" @click="toggleHiddenFrame(index)">
-                <input type="checkbox" :checked="!hiddenFrames.includes(index)" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" @click.stop @change="toggleHiddenFrame(index)" />
-                <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center overflow-hidden">
-                  <img :src="sprite.img.src" class="max-w-full max-h-full object-contain" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
+          <!-- Frame Selection (when Compare sprites is enabled) -->
+          <div v-if="showAllSprites" class="space-y-2">
+            <div class="flex items-center justify-between">
+              <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Frames</h3>
+              <div class="flex gap-1">
+                <button @click="showAllFrames" class="px-2 py-1 text-xs bg-blue-500 hover:bg-blue-600 text-white rounded transition-colors">All</button>
+                <button @click="hideAllFrames" class="px-2 py-1 text-xs bg-gray-500 hover:bg-gray-600 text-white rounded transition-colors">None</button>
+              </div>
+            </div>
+            <div class="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800">
+              <div class="max-h-[180px] overflow-y-auto">
+                <div class="space-y-0.5 p-1">
+                  <div v-for="(sprite, index) in props.sprites" :key="sprite.id" class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer rounded" @click="toggleHiddenFrame(index)">
+                    <input type="checkbox" :checked="!hiddenFrames.includes(index)" class="w-3.5 h-3.5 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" @click.stop @change="toggleHiddenFrame(index)" />
+                    <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center overflow-hidden flex-shrink-0">
+                      <img :src="sprite.img.src" class="max-w-full max-h-full object-contain" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
+                    </div>
+                    <span class="text-xs dark:text-gray-200">{{ index + 1 }}</span>
+                  </div>
                 </div>
-                <span class="text-sm dark:text-gray-200">Frame {{ index + 1 }}</span>
               </div>
             </div>
           </div>
         </div>
       </div>
-
-      <!-- Current frame offset display -->
-      <div v-if="props.sprites[currentFrameIndex]" class="mt-3 p-2 bg-gray-100 dark:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600">
-        <div class="flex items-center justify-between">
-          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Current Frame Offset:</span>
-          <span class="text-sm font-mono font-semibold text-cyan-600 dark:text-cyan-400">x: {{ props.sprites[currentFrameIndex].x }}, y: {{ props.sprites[currentFrameIndex].y }}</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-3 relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg mb-4 sm:mb-6 overflow-auto min-h-[300px] sm:min-h-[520px] shadow-sm hover:shadow-md transition-shadow duration-200">
-      <canvas
-        ref="previewCanvasRef"
-        @mousedown="startDrag"
-        @mousemove="drag"
-        @mouseup="stopDrag"
-        @mouseleave="stopDrag"
-        @touchstart="handleTouchStart"
-        @touchmove="handleTouchMove"
-        @touchend="stopDrag"
-        class="block touch-manipulation"
-        :class="{ 'cursor-move': isDraggable }"
-        :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left', ...(settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}) }"
-      >
-      </canvas>
-
-      <!-- Mobile zoom controls -->
-      <div class="absolute bottom-3 right-3 flex space-x-2 sm:hidden bg-white/80 dark:bg-gray-800/80 p-2 rounded-lg shadow-md">
-        <button @click="increaseZoom" class="p-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg transition-colors">
-          <i class="fas fa-plus"></i>
-        </button>
-        <button @click="decreaseZoom" class="p-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg transition-colors">
-          <i class="fas fa-minus"></i>
-        </button>
-      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index d54376d..d56e58f 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -32,7 +32,11 @@
       </div>
 
       <!-- Resize handle -->
-      <div v-if="!isFullScreen && !isMobile" class="absolute bottom-0 right-0 w-8 h-8 cursor-se-resize" @mousedown="startResize" @touchstart="startResize"></div>
+      <div v-if="!isFullScreen && !isMobile" class="absolute bottom-0 right-0 w-8 h-8 cursor-se-resize" @mousedown="startResize" @touchstart="startResize">
+        <svg class="w-8 h-8 text-gray-400 dark:text-gray-500" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M22 22H20V20H22V22ZM22 18H20V16H22V18ZM18 22H16V20H18V22ZM22 14H20V12H22V14ZM18 18H16V16H18V18ZM14 22H12V20H14V22Z"/>
+        </svg>
+      </div>
     </div>
   </Teleport>
 </template>