From 8505e98947f1dc6c086c30719dab27d33cf7749d Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Tue, 25 Nov 2025 16:39:49 +0100
Subject: [PATCH] [FEAT] Enhance UI

---
 src/App.vue | 170 +++++++++++++++++++++++++++-------------------------
 1 file changed, 88 insertions(+), 82 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f8a55b4..48f5307 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="min-h-screen p-4 sm:p-8 bg-slate-50 dark:bg-gray-950 transition-colors duration-300">
-    <div class="max-w-[1600px] mx-auto">
+  <div class="min-h-screen lg:h-screen flex flex-col p-4 sm:p-8 bg-slate-50 dark:bg-gray-950 transition-colors duration-300">
+    <div class="flex flex-col flex-1 lg:overflow-hidden">
       <header class="mb-4 sm:mb-6">
         <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-6">
           <div class="text-center sm:text-left">
@@ -9,11 +9,11 @@
           </div>
           <dark-mode-toggle />
         </div>
-        <nav class="flex flex-wrap justify-center sm:justify-start items-center gap-2 sm:gap-3">
+        <nav class="flex flex-wrap items-center justify-center sm:justify-start gap-2 sm:gap-3">
           <a
             href="https://gitea.adhd.sh/root/spritesheet-generator"
             target="_blank"
-            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-all hover:shadow-md"
+            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
             data-rybbit-event="source-link"
           >
             <i class="fab fa-github"></i>
@@ -22,7 +22,7 @@
           <a
             href="https://discord.gg/JTev3nzeDa"
             target="_blank"
-            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-all hover:shadow-md"
+            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
             data-rybbit-event="discord-link"
           >
             <i class="fab fa-discord"></i>
@@ -31,7 +31,7 @@
           <a
             href="#"
             @click.prevent="openHelpModal"
-            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-all hover:shadow-md"
+            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
             data-rybbit-event="help-link"
           >
             <i class="fas fa-question-circle"></i>
@@ -40,7 +40,7 @@
           <a
             href="#"
             @click.prevent="openFeedbackModal"
-            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-all hover:shadow-md"
+            class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
             data-rybbit-event="feedback-link"
           >
             <i class="fas fa-comment-dots"></i>
@@ -49,9 +49,9 @@
         </nav>
       </header>
 
-      <main class="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 transition-all duration-300 overflow-hidden">
+      <main class="flex flex-col flex-1 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 lg:overflow-hidden transition-all duration-300">
         <!-- Welcome state -->
-        <div v-if="!visibleLayers.some(l => l.sprites.length)" class="p-6 sm:p-10">
+        <div v-if="!visibleLayers.some(l => l.sprites.length)" class="p-6 sm:p-10 overflow-y-auto">
           <div class="mb-8">
             <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Upload sprites or single image</h2>
             <p class="text-sm text-gray-600 dark:text-gray-400">Drag and drop images or import from JSON</p>
@@ -90,23 +90,23 @@
         </div>
 
         <!-- Two-column layout: Left controls, Right preview -->
-        <div v-if="visibleLayers.some(l => l.sprites.length)" class="grid lg:grid-cols-[380px_1fr] xl:grid-cols-[420px_1fr] min-h-[600px]">
+        <div v-if="visibleLayers.some(l => l.sprites.length)" class="flex flex-col flex-1 lg:grid lg:grid-cols-[380px_1fr] xl:grid-cols-[420px_1fr] lg:overflow-hidden">
           <!-- Left sidebar - Controls -->
-          <div class="border-r border-gray-200 dark:border-gray-700 p-6 overflow-y-auto max-h-[calc(100vh-200px)] bg-gray-50/50 dark:bg-gray-900/30">
+          <div class="p-6 bg-gray-50/50 dark:bg-gray-900/30 border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700 lg:overflow-y-auto lg:overflow-x-auto">
             <div class="space-y-6">
               <!-- Upload Section -->
               <section>
                 <div class="flex items-center justify-between mb-3">
-                  <h3 class="text-base font-bold text-gray-800 dark:text-gray-100 flex items-center gap-2">
-                    <i class="fas fa-upload text-gray-700 dark:text-gray-300 text-sm"></i>
+                  <h3 class="flex items-center gap-2 text-base font-bold text-gray-800 dark:text-gray-100">
+                    <i class="text-sm text-gray-700 dark:text-gray-300 fas fa-upload"></i>
                     Upload
                   </h3>
-                  <button @click="openJSONImportDialog" class="px-3 py-1.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white text-xs font-medium rounded-lg transition-all flex items-center gap-1.5 cursor-pointer" data-rybbit-event="import-json">
-                    <i class="fas fa-file-import text-xs"></i>
+                  <button @click="openJSONImportDialog" class="flex items-center gap-1.5 px-3 py-1.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-xs font-medium text-white rounded-lg transition-all cursor-pointer" data-rybbit-event="import-json">
+                    <i class="text-xs fas fa-file-import"></i>
                     <span>JSON</span>
                   </button>
                 </div>
-                <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-4 text-center hover:border-gray-500 dark:hover:border-gray-400 transition-colors cursor-pointer" @click="openFileDialog">
+                <div class="p-4 text-center border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl hover:border-gray-500 dark:hover:border-gray-400 transition-colors cursor-pointer" @click="openFileDialog">
                   <i class="fas fa-plus-circle text-2xl text-gray-700 dark:text-gray-300 mb-2"></i>
                   <p class="text-xs text-gray-600 dark:text-gray-400">Add sprites</p>
                 </div>
@@ -117,12 +117,12 @@
               <!-- Layers -->
               <section>
                 <div class="flex items-center justify-between mb-3">
-                  <h3 class="text-base font-bold text-gray-800 dark:text-gray-100 flex items-center gap-2">
-                    <i class="fas fa-layer-group text-gray-700 dark:text-gray-300 text-sm"></i>
+                  <h3 class="flex items-center gap-2 text-base font-bold text-gray-800 dark:text-gray-100">
+                    <i class="text-sm text-gray-700 dark:text-gray-300 fas fa-layer-group"></i>
                     Layers
                   </h3>
-                  <button @click="addLayer()" class="px-3 py-1.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white text-xs font-medium rounded-lg transition-all flex items-center gap-1.5 cursor-pointer">
-                    <i class="fas fa-plus text-xs"></i>
+                  <button @click="addLayer()" class="flex items-center gap-1.5 px-3 py-1.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-xs font-medium text-white rounded-lg transition-all cursor-pointer">
+                    <i class="text-xs fas fa-plus"></i>
                     <span>Add</span>
                   </button>
                 </div>
@@ -130,11 +130,11 @@
                   <div
                     v-for="layer in layers"
                     :key="layer.id"
-                    class="flex items-center gap-2 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border transition-all"
+                    class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-800 border rounded-lg transition-all"
                     :class="[layer.id === activeLayerId ? 'border-gray-800 ring-1 ring-gray-800 dark:border-gray-400 dark:ring-gray-400' : 'border-gray-200 dark:border-gray-700', !layer.visible ? 'opacity-50' : '']"
                   >
                     <button @click.stop="layer.visible = !layer.visible" class="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors cursor-pointer" :title="layer.visible ? 'Hide layer' : 'Show layer'">
-                      <i :class="layer.visible ? 'fas fa-eye text-gray-800 dark:text-gray-200' : 'fas fa-eye-slash text-gray-400 dark:text-gray-500'" class="text-sm"></i>
+                      <i :class="layer.visible ? 'text-sm text-gray-800 dark:text-gray-200 fas fa-eye' : 'text-sm text-gray-400 dark:text-gray-500 fas fa-eye-slash'"></i>
                     </button>
                     <input
                       v-if="editingLayerId === layer.id"
@@ -143,25 +143,25 @@
                       @blur="finishEditingLayer"
                       @keyup.enter="finishEditingLayer"
                       @keyup.esc="cancelEditingLayer"
-                      class="flex-1 px-2 py-1 border border-gray-800 dark:border-gray-400 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-gray-800 dark:focus:ring-gray-400 outline-none"
+                      class="flex-1 px-2 py-1 text-sm border border-gray-800 dark:border-gray-400 dark:bg-gray-700 dark:text-gray-100 rounded outline-none focus:ring-2 focus:ring-gray-800 dark:focus:ring-gray-400"
                       ref="layerNameInput"
                       @click.stop
                     />
-                    <button v-else @click="activeLayerId = layer.id" class="flex-1 text-left px-2 py-1 rounded text-sm font-medium transition-all cursor-pointer" :class="layer.id === activeLayerId ? 'text-gray-900 dark:text-gray-100' : 'text-gray-700 dark:text-gray-300'">
+                    <button v-else @click="activeLayerId = layer.id" class="flex-1 px-2 py-1 text-sm font-medium text-left rounded transition-all cursor-pointer" :class="layer.id === activeLayerId ? 'text-gray-900 dark:text-gray-100' : 'text-gray-700 dark:text-gray-300'">
                       {{ layer.name }}
-                      <span v-if="layer.sprites.length" class="text-xs opacity-60 ml-1">({{ layer.sprites.length }})</span>
+                      <span v-if="layer.sprites.length" class="ml-1 text-xs opacity-60">({{ layer.sprites.length }})</span>
                     </button>
                     <button v-if="editingLayerId !== layer.id" @click="startEditingLayer(layer.id, layer.name)" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors cursor-pointer" title="Rename">
-                      <i class="fas fa-pen text-xs text-gray-600 dark:text-gray-400"></i>
+                      <i class="text-xs text-gray-600 dark:text-gray-400 fas fa-pen"></i>
                     </button>
                     <button @click="moveLayer(layer.id, 'up')" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors cursor-pointer" title="Move up">
-                      <i class="fas fa-chevron-up text-xs text-gray-600 dark:text-gray-400"></i>
+                      <i class="text-xs text-gray-600 dark:text-gray-400 fas fa-chevron-up"></i>
                     </button>
                     <button @click="moveLayer(layer.id, 'down')" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors cursor-pointer" title="Move down">
-                      <i class="fas fa-chevron-down text-xs text-gray-600 dark:text-gray-400"></i>
+                      <i class="text-xs text-gray-600 dark:text-gray-400 fas fa-chevron-down"></i>
                     </button>
-                    <button v-if="layers.length > 1" @click="removeLayer(layer.id)" class="p-1 hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 rounded transition-colors cursor-pointer" title="Delete">
-                      <i class="fas fa-trash text-xs"></i>
+                    <button v-if="layers.length > 1" @click="removeLayer(layer.id)" class="p-1 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-colors cursor-pointer" title="Delete">
+                      <i class="text-xs fas fa-trash"></i>
                     </button>
                   </div>
                 </div>
@@ -169,17 +169,17 @@
 
               <!-- Grid Settings -->
               <section>
-                <h3 class="text-base font-bold text-gray-800 dark:text-gray-100 mb-3 flex items-center gap-2">
-                  <i class="fas fa-th text-gray-700 dark:text-gray-300 text-sm"></i>
+                <h3 class="flex items-center gap-2 mb-3 text-base font-bold text-gray-800 dark:text-gray-100">
+                  <i class="text-sm text-gray-700 dark:text-gray-300 fas fa-th"></i>
                   Grid
                 </h3>
                 <div class="space-y-3">
-                  <div class="flex items-center justify-between bg-white dark:bg-gray-800 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700">
+                  <div class="flex items-center justify-between px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
                     <label for="columns" class="text-sm font-medium text-gray-700 dark:text-gray-200">Columns</label>
-                    <input id="columns" type="number" v-model.number="columns" min="1" max="10" class="w-16 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-gray-500 outline-none" />
+                    <input id="columns" type="number" v-model.number="columns" min="1" max="10" class="w-16 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded outline-none focus:ring-2 focus:ring-gray-500" />
                   </div>
 
-                  <div class="bg-white dark:bg-gray-800 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700">
+                  <div class="px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
                     <label class="flex items-center justify-between mb-2 cursor-pointer">
                       <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Manual size</span>
                       <input type="checkbox" v-model="settingsStore.manualCellSizeEnabled" class="w-4 h-4 rounded" />
@@ -190,47 +190,47 @@
                         v-model.number="settingsStore.manualCellWidth"
                         min="1"
                         max="2048"
-                        class="w-full min-w-0 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-gray-500 outline-none"
+                        class="w-full min-w-0 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded outline-none focus:ring-2 focus:ring-gray-500"
                         placeholder="W"
                       />
-                      <span class="text-gray-500 dark:text-gray-400 flex-shrink-0">×</span>
+                      <span class="flex-shrink-0 text-gray-500 dark:text-gray-400">×</span>
                       <input
                         type="number"
                         v-model.number="settingsStore.manualCellHeight"
                         min="1"
                         max="2048"
-                        class="w-full min-w-0 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-sm focus:ring-2 focus:ring-gray-500 outline-none"
+                        class="w-full min-w-0 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded outline-none focus:ring-2 focus:ring-gray-500"
                         placeholder="H"
                       />
                     </div>
-                    <div v-else class="text-xs text-gray-500 dark:text-gray-400 font-mono mt-1 break-words">{{ cellSize.width }} × {{ cellSize.height }}px</div>
+                    <div v-else class="mt-1 text-xs font-mono text-gray-500 dark:text-gray-400 break-words">{{ cellSize.width }} × {{ cellSize.height }}px</div>
                   </div>
                 </div>
               </section>
 
               <!-- Alignment -->
               <section>
-                <h3 class="text-base font-bold text-gray-800 dark:text-gray-100 mb-3 flex items-center gap-2">
-                  <i class="fas fa-align-center text-gray-700 dark:text-gray-300 text-sm"></i>
+                <h3 class="flex items-center gap-2 mb-3 text-base font-bold text-gray-800 dark:text-gray-100">
+                  <i class="text-sm text-gray-700 dark:text-gray-300 fas fa-align-center"></i>
                   Align
                 </h3>
                 <div class="grid grid-cols-3 gap-2">
-                  <button @click="alignSprites('left')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Left">
+                  <button @click="alignSprites('left')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Left">
                     <i class="fas fa-arrow-left"></i>
                   </button>
-                  <button @click="alignSprites('center')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Center">
+                  <button @click="alignSprites('center')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Center">
                     <i class="fas fa-arrows-left-right"></i>
                   </button>
-                  <button @click="alignSprites('right')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Right">
+                  <button @click="alignSprites('right')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Right">
                     <i class="fas fa-arrow-right"></i>
                   </button>
-                  <button @click="alignSprites('top')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Top">
+                  <button @click="alignSprites('top')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Top">
                     <i class="fas fa-arrow-up"></i>
                   </button>
-                  <button @click="alignSprites('middle')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Middle">
+                  <button @click="alignSprites('middle')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Middle">
                     <i class="fas fa-arrows-up-down"></i>
                   </button>
-                  <button @click="alignSprites('bottom')" class="px-3 py-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-100 rounded-lg transition-all text-xs font-medium cursor-pointer" title="Bottom">
+                  <button @click="alignSprites('bottom')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Bottom">
                     <i class="fas fa-arrow-down"></i>
                   </button>
                 </div>
@@ -238,24 +238,24 @@
 
               <!-- Export -->
               <section>
-                <h3 class="text-base font-bold text-gray-800 dark:text-gray-100 mb-3 flex items-center gap-2">
-                  <i class="fas fa-download text-gray-700 dark:text-gray-300 text-sm"></i>
+                <h3 class="flex items-center gap-2 mb-3 text-base font-bold text-gray-800 dark:text-gray-100">
+                  <i class="text-sm text-gray-700 dark:text-gray-300 fas fa-download"></i>
                   Export
                 </h3>
                 <div class="grid grid-cols-2 gap-2">
-                  <button @click="downloadSpritesheet" class="px-3 py-2 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="download-spritesheet">
+                  <button @click="downloadSpritesheet" class="flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 rounded-lg transition-all cursor-pointer" data-rybbit-event="download-spritesheet">
                     <i class="fas fa-image"></i>
                     <span>PNG</span>
                   </button>
-                  <button @click="exportSpritesheetJSON" class="px-3 py-2 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="export-json">
+                  <button @click="exportSpritesheetJSON" class="flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 rounded-lg transition-all cursor-pointer" data-rybbit-event="export-json">
                     <i class="fas fa-file-code"></i>
                     <span>JSON</span>
                   </button>
-                  <button @click="openGifFpsModal" class="px-3 py-2 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="download-gif">
+                  <button @click="openGifFpsModal" class="flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 rounded-lg transition-all cursor-pointer" data-rybbit-event="download-gif">
                     <i class="fas fa-film"></i>
                     <span>GIF</span>
                   </button>
-                  <button @click="downloadAsZip" class="px-3 py-2 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-lg transition-all text-xs font-medium flex items-center justify-center gap-1.5 cursor-pointer" data-rybbit-event="download-zip">
+                  <button @click="downloadAsZip" class="flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 rounded-lg transition-all cursor-pointer" data-rybbit-event="download-zip">
                     <i class="fas fa-file-archive"></i>
                     <span>ZIP</span>
                   </button>
@@ -265,20 +265,26 @@
           </div>
 
           <!-- Right panel - Tabs -->
-          <div class="flex flex-col min-w-0">
+          <div class="flex flex-col overflow-hidden">
             <!-- Tab Navigation -->
-            <div class="border-b border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-900/30">
+            <div class="bg-gray-50/50 dark:bg-gray-900/30 border-b border-gray-200 dark:border-gray-700">
               <div class="flex gap-1 p-2">
                 <button
                   @click="activeTab = 'canvas'"
-                  :class="['flex items-center gap-2 px-4 py-2 rounded-lg transition-all text-sm font-medium', activeTab === 'canvas' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50']"
+                  :class="[
+                    'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer',
+                    activeTab === 'canvas' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50',
+                  ]"
                 >
                   <i class="fas fa-th"></i>
                   <span>Canvas</span>
                 </button>
                 <button
                   @click="activeTab = 'preview'"
-                  :class="['flex items-center gap-2 px-4 py-2 rounded-lg transition-all text-sm font-medium', activeTab === 'preview' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50']"
+                  :class="[
+                    'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer',
+                    activeTab === 'preview' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50',
+                  ]"
                   data-rybbit-event="preview-animation"
                 >
                   <i class="fas fa-play"></i>
@@ -288,11 +294,11 @@
             </div>
 
             <!-- Tab Content -->
-            <div class="p-6 overflow-y-auto overflow-x-hidden max-h-[calc(100vh-260px)] min-w-0">
-              <div v-if="activeTab === 'canvas'" class="max-w-full">
+            <div class="p-6 lg:flex-1 lg:overflow-auto">
+              <div v-if="activeTab === 'canvas'">
                 <sprite-canvas :layers="layers" :active-layer-id="activeLayerId" :columns="columns" @update-sprite="updateSpritePosition" @update-sprite-cell="updateSpriteCell" @remove-sprite="removeSprite" @replace-sprite="replaceSprite" @add-sprite="addSprite" />
               </div>
-              <div v-if="activeTab === 'preview'" class="max-w-full">
+              <div v-if="activeTab === 'preview'">
                 <sprite-preview :layers="layers" :active-layer-id="activeLayerId" :columns="columns" @update-sprite="updateSpritePosition" @update-sprite-in-layer="updateSpriteInLayer" />
               </div>
             </div>
@@ -300,23 +306,23 @@
         </div>
       </main>
 
-      <div class="mt-6 p-6 sm:p-8 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 border-2 border-blue-200 dark:border-gray-600 rounded-xl shadow-lg">
-        <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
-          <div class="text-center sm:text-left">
-            <div class="flex items-center justify-center sm:justify-start gap-3 mb-2">
-              <i class="fas fa-ad text-3xl text-blue-600 dark:text-blue-400"></i>
-              <span class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100">Your ad here</span>
-            </div>
-            <p class="text-base sm:text-lg text-gray-600 dark:text-gray-300">Reach thousands of game developers and creative professionals</p>
+      <div class="flex-shrink-0 p-3 mt-3 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg">
+        <div class="flex flex-col sm:flex-row items-center justify-between gap-2">
+          <div class="flex items-center gap-2 text-center sm:text-left">
+            <i class="text-lg text-blue-600 dark:text-blue-400 fas fa-ad"></i>
+            <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">Your ad here</span>
+            <span class="hidden sm:inline text-xs text-gray-600 dark:text-gray-400">- Reach thousands of game developers and creative professionals</span>
           </div>
-          <div class="flex flex-col gap-3">
-            <a href="mailto:root@adhd.sh" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white rounded-lg transition-all shadow-md hover:shadow-lg text-base font-medium">
-              <i class="fas fa-envelope"></i>
-              root@adhd.sh
+          <div class="flex gap-2">
+            <a href="mailto:root@adhd.sh" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded transition-all">
+              <i class="text-xs fas fa-envelope"></i>
+              <span class="hidden sm:inline">root@adhd.sh</span>
+              <span class="sm:hidden">Email</span>
             </a>
-            <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white rounded-lg transition-all shadow-md hover:shadow-lg text-base font-medium">
-              <i class="fab fa-discord"></i>
-              Discord: nu11ed
+            <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 rounded transition-all">
+              <i class="text-xs fab fa-discord"></i>
+              <span class="hidden sm:inline">nu11ed</span>
+              <span class="sm:hidden">Discord</span>
             </a>
           </div>
         </div>
@@ -329,15 +335,15 @@
     <GifFpsModal :is-open="isGifFpsModalOpen" @close="closeGifFpsModal" @confirm="downloadAsGif" :default-fps="10" />
 
     <!-- One-time feedback popup -->
-    <div v-if="showFeedbackPopup" class="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
-      <div class="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-md mx-4 shadow-xl border border-gray-600">
+    <div v-if="showFeedbackPopup" class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+      <div class="max-w-md p-6 mx-4 bg-white dark:bg-gray-800 border border-gray-600 rounded-xl shadow-xl">
         <div class="text-center">
-          <div class="text-4xl mb-4">💬</div>
-          <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Help us improve!</h3>
-          <p class="text-gray-600 dark:text-gray-300 mb-6">We'd love to hear your thoughts about the Spritesheet generator. Would you like to share your feedback?</p>
-          <div class="flex gap-3 justify-center">
+          <div class="mb-4 text-4xl">💬</div>
+          <h3 class="mb-3 text-lg font-semibold text-gray-900 dark:text-white">Help us improve!</h3>
+          <p class="mb-6 text-gray-600 dark:text-gray-300">We'd love to hear your thoughts about the Spritesheet generator. Would you like to share your feedback?</p>
+          <div class="flex justify-center gap-3">
             <button @click="handleFeedbackPopupResponse(false)" class="px-4 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors cursor-pointer">Maybe later</button>
-            <button @click="handleFeedbackPopupResponse(true)" class="px-6 py-2 bg-gray-700 hover:bg-gray-800 text-white font-medium rounded-lg transition-colors cursor-pointer">Share feedback</button>
+            <button @click="handleFeedbackPopupResponse(true)" class="px-6 py-2 font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors cursor-pointer">Share feedback</button>
           </div>
         </div>
       </div>