From fe018528dfdce21f9ea57528d81f9249eba1f7c9 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 21 Jul 2024 18:14:38 +0200
Subject: [PATCH] Also converted zoneeditor styling to tailwind breakpoints

---
 src/components/utilities/GmPanel.vue          |  8 ++--
 src/components/utilities/GmTools.vue          |  6 +--
 src/components/utilities/Modal.vue            |  4 +-
 src/components/utilities/Notifications.vue    |  2 +-
 .../utilities/assetManager/AssetManager.vue   | 24 +++++------
 .../assetManager/partials/ObjectDetails.vue   | 10 ++---
 .../assetManager/partials/ObjectList.vue      | 14 +++----
 .../assetManager/partials/SpriteDetails.vue   | 10 ++---
 .../assetManager/partials/SpriteList.vue      | 10 ++---
 .../assetManager/partials/TileDetails.vue     | 10 ++---
 .../assetManager/partials/TileList.vue        | 14 +++----
 .../utilities/zoneEditor/CreateZone.vue       | 16 +++----
 .../utilities/zoneEditor/Objects.vue          |  4 +-
 .../zoneEditor/SelectedZoneObject.vue         |  8 ++--
 .../utilities/zoneEditor/Toolbar.vue          | 42 +++++++++----------
 .../utilities/zoneEditor/ZoneList.vue         | 12 +++---
 .../utilities/zoneEditor/ZoneSettings.vue     | 14 +++----
 tailwind.config.js                            |  3 ++
 18 files changed, 107 insertions(+), 104 deletions(-)

diff --git a/src/components/utilities/GmPanel.vue b/src/components/utilities/GmPanel.vue
index efe7877..8588330 100644
--- a/src/components/utilities/GmPanel.vue
+++ b/src/components/utilities/GmPanel.vue
@@ -3,10 +3,10 @@
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0">GM Panel</h3>
       <div class="flex gap-1.5 flex-wrap">
-        <button @mousedown.stop class="btn-cyan py-1.5 px-[15px] min-w-[100px]">General</button>
-        <button @mousedown.stop class="btn-cyan py-1.5 px-[15px] min-w-[100px]">Users</button>
-        <button @mousedown.stop class="btn-cyan py-1.5 px-[15px] min-w-[100px]">Chats</button>
-        <button @mousedown.stop class="btn-cyan active py-1.5 px-[15px] min-w-[100px]">Asset manager</button>
+        <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button>
+        <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
+        <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Chats</button>
+        <button @mousedown.stop class="btn-cyan active py-1.5 px-4 min-w-24">Asset manager</button>
       </div>
     </template>
     <template #modalBody>
diff --git a/src/components/utilities/GmTools.vue b/src/components/utilities/GmTools.vue
index c8e09fb..cc85d78 100644
--- a/src/components/utilities/GmTools.vue
+++ b/src/components/utilities/GmTools.vue
@@ -4,9 +4,9 @@
       <h3 class="m-0 font-medium shrink-0">GM tools</h3>
     </template>
     <template #modalBody>
-      <div class="content flex flex-col gap-2.5 m-[15px] h-[80px]">
-        <button class="btn-cyan py-1.5 px-[15px] w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button>
-        <button class="btn-cyan py-1.5 px-[15px] w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
+      <div class="content flex flex-col gap-2.5 m-4 h-20">
+        <button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button>
+        <button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
       </div>
     </template>
   </Modal>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 4912cc2..b68a613 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -11,9 +11,9 @@
       </div>
       <div class="overflow-auto grow">
         <slot name="modalBody" />
-        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
+        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-3/5" @mousedown="startResize" />
       </div>
-      <div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
+      <div v-if="$slots.modalFooter" class="px-5 min-h-12 flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
         <slot name="modalFooter" />
       </div>
     </div>
diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue
index a80f78f..76ea3c1 100644
--- a/src/components/utilities/Notifications.vue
+++ b/src/components/utilities/Notifications.vue
@@ -4,7 +4,7 @@
       <h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
     </template>
     <template #modalBody v-if="notification.message">
-      <p class="m-[15px]">{{ notification.message }}</p>
+      <p class="m-4">{{ notification.message }}</p>
     </template>
   </Modal>
 </template>
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 5ae033c..e4a43bd 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -1,49 +1,49 @@
 <template>
   <div class="flex h-full w-full relative">
-    <div class="w-[15%] flex flex-col relative">
+    <div class="w-2/12 flex flex-col relative">
       <!-- Asset Categories -->
       <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
         <span>Tiles</span>
-        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
         <span>Objects</span>
-        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
         <span>Sprites</span>
-        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>Items</span>
-        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>NPC's</span>
-        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>Characters</span>
-        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>Mounts</span>
-        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>Pets</span>
-        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
     </div>
-    <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-[15%]"></div>
+    <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
 
     <!-- Assets list -->
-    <div class="overflow-auto h-full w-[35%] flex flex-col relative">
+    <div class="overflow-auto h-full w-4/12 flex flex-col relative">
       <TileList v-if="selectedCategory === 'tiles'" />
       <ObjectList v-if="selectedCategory === 'objects'" />
     </div>
 
-    <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
+    <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/2"></div>
 
     <!-- Asset details -->
     <div class="flex w-1/2 after:hidden flex-col relative overflow-auto">
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 4bfa368..bfd3766 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-between h-[300px]">
+    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
       <div class="filler"></div>
-      <img class="max-h-[280px]" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
-      <button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click.prevent="removeObject">Remove</button>
-      <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+      <img class="max-h-72" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
+      <button class="btn-bordeaux px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
+      <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
     </div>
     <div class="m-2.5 p-2.5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
@@ -24,7 +24,7 @@
           <label class="mb-1.5 font-titles" for="origin-x">Tags</label>
           <ChipsInput v-model="objectTags" @update:modelValue="objectTags = $event" />
         </div>
-        <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
+        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
       </form>
     </div>
   </div>
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index b3c3da0..03baba3 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
-    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-4 inline-flex hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload object(s)
     </label>
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
-    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
         <div class="flex items-center gap-2.5">
-          <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
-            <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
+          <div class="h-7 w-16 max-w-16 flex justify-center">
+            <img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
           </div>
           <span>{{ object.name }}</span>
         </div>
-        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
     </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
-      <img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
     </button>
   </div>
 </template>
diff --git a/src/components/utilities/assetManager/partials/SpriteDetails.vue b/src/components/utilities/assetManager/partials/SpriteDetails.vue
index 459812c..2ae09a7 100644
--- a/src/components/utilities/assetManager/partials/SpriteDetails.vue
+++ b/src/components/utilities/assetManager/partials/SpriteDetails.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-between h-[300px]">
+    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
       <div class="filler"></div>
-      <img class="max-h-[280px]" :src="`${config.server_endpoint}/assets/sprites/${selectedSprite?.id}.png`" :alt="'Sprite ' + selectedSprite?.id" />
-      <button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click.prevent="removeSprite">Remove</button>
-      <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+      <img class="max-h-72" :src="`${config.server_endpoint}/assets/sprites/${selectedSprite?.id}.png`" :alt="'Sprite ' + selectedSprite?.id" />
+      <button class="btn-bordeaux px-4 py-1.5 min-w-24]" type="button" @click.prevent="removeSprite">Remove</button>
+      <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
     </div>
     <div class="m-2.5 p-2.5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveSprite">
@@ -24,7 +24,7 @@
           <label class="mb-1.5 font-titles" for="origin-x">Tags</label>
           <ChipsInput v-model="spriteTags" @update:modelValue="spriteTags = $event" />
         </div>
-        <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
+        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
       </form>
     </div>
   </div>
diff --git a/src/components/utilities/assetManager/partials/SpriteList.vue b/src/components/utilities/assetManager/partials/SpriteList.vue
index 22bb102..f0d8249 100644
--- a/src/components/utilities/assetManager/partials/SpriteList.vue
+++ b/src/components/utilities/assetManager/partials/SpriteList.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
-    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-4 inline-flex hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="spriteUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload sprite(s)
     </label>
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
-    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
   </div>
   <a class="relative p-2.5 cursor-pointer" :class="{ 'bg-cyan/80': assetManagerStore.selectedSprite?.id === sprite.id }" v-for="(sprite, index) in filteredSprites" :key="index" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
     <div class="flex items-center gap-2.5">
-      <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
-        <img class="h-[28px]" :src="`${config.server_endpoint}/assets/sprites/${sprite.id}.png`" alt="Sprite" />
+      <div class="h-7 w-16 max-w-16 flex justify-center">
+        <img class="h-7" :src="`${config.server_endpoint}/assets/sprites/${sprite.id}.png`" alt="Sprite" />
       </div>
       <span>{{ sprite.name }}</span>
     </div>
-    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
   </a>
 </template>
 
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
index 3921cce..02f0f3d 100644
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-between h-[300px]">
+    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
       <div class="filler"></div>
-      <img class="max-h-[280px]" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
-      <button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click.prevent="removeTile">Remove</button>
-      <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+      <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
+      <button class="btn-bordeaux px-4 py-1.5 min-w-24" type="button" @click.prevent="removeTile">Remove</button>
+      <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
     </div>
     <div class="m-2.5 p-2.5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
@@ -16,7 +16,7 @@
           <label class="mb-1.5 font-titles" for="origin-x">Tags</label>
           <ChipsInput v-model="tileTags" @update:modelValue="tileTags = $event" />
         </div>
-        <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
+        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
       </form>
     </div>
   </div>
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index aff601c..4f9c1cb 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
-    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-4 inline-flex hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload tile(s)
     </label>
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
-    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
         <div class="flex items-center gap-2.5">
-          <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
-            <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
+          <div class="h-7 w-16 max-w-16 flex justify-center">
+            <img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
           </div>
           <span>{{ tile.name }}</span>
         </div>
-        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
     </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
-      <img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
     </button>
   </div>
 </template>
diff --git a/src/components/utilities/zoneEditor/CreateZone.vue b/src/components/utilities/zoneEditor/CreateZone.vue
index d0516a2..14844de 100644
--- a/src/components/utilities/zoneEditor/CreateZone.vue
+++ b/src/components/utilities/zoneEditor/CreateZone.vue
@@ -5,27 +5,27 @@
     </template>
 
     <template #modalBody>
-      <div class="m-[15px]">
+      <div class="m-4">
         <form method="post" @submit.prevent="submit" class="inline">
           <div class="gap-2.5 flex flex-wrap">
             <div class="w-full flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Name</label>
-              <input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
+              <input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
             </div>
-            <div class="w-[48%] flex flex-col mb-5">
+            <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Width</label>
-              <input class="input-cyan max-w-[250px]" v-model="width" name="name" id="name" type="number" />
+              <input class="input-cyan max-w-64" v-model="width" name="name" id="name" type="number" />
             </div>
-            <div class="w-[48%] flex flex-col mb-5">
+            <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Height</label>
-              <input class="input-cyan max-w-[250px]" v-model="height" name="name" id="name" type="number" />
+              <input class="input-cyan max-w-64" v-model="height" name="name" id="name" type="number" />
             </div>
             <div class="w-full flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">PVP enabled</label>
-              <input class="input-cyan max-w-[250px]" name="name" id="name" />
+              <input class="input-cyan max-w-64" name="name" id="name" />
             </div>
           </div>
-          <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
+          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
         </form>
       </div>
     </template>
diff --git a/src/components/utilities/zoneEditor/Objects.vue b/src/components/utilities/zoneEditor/Objects.vue
index 10883f0..d91eb06 100644
--- a/src/components/utilities/zoneEditor/Objects.vue
+++ b/src/components/utilities/zoneEditor/Objects.vue
@@ -17,14 +17,14 @@
         </div>
       </template>
       <template #modalBody>
-        <div class="m-[15px]">
+        <div class="m-4">
           <div class="mb-4 flex flex-wrap gap-2">
             <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
               {{ tag }}
             </button>
           </div>
           <div class="flex justify-between flex-wrap gap-2.5 items-center">
-            <div v-for="(object, index) in filteredObjects" :key="index" class="max-w-[25%] inline-block">
+            <div v-for="(object, index) in filteredObjects" :key="index" class="max-w-1/4 inline-block">
               <img
                 class="border-2 border-solid max-w-full"
                 :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
diff --git a/src/components/utilities/zoneEditor/SelectedZoneObject.vue b/src/components/utilities/zoneEditor/SelectedZoneObject.vue
index 9b3d3c4..4aa1ffb 100644
--- a/src/components/utilities/zoneEditor/SelectedZoneObject.vue
+++ b/src/components/utilities/zoneEditor/SelectedZoneObject.vue
@@ -3,13 +3,13 @@
     <div class="self-end mt-2 flex gap-2">
       <div>
         <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
-        <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-[90px] px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" :disabled="!isObjectSelected" />
+        <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" :disabled="!isObjectSelected" />
       </div>
-      <button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-[15px]" :disabled="!isObjectSelected">
+      <button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-4" :disabled="!isObjectSelected">
         <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
       </button>
-      <button @mousedown.stop @click="zoneEditorStore.setSelectedObject(zoneEditorStore.selectedZoneObject?.object)" class="btn-cyan py-1.5 px-[15px]" :disabled="!isObjectSelected">S</button>
-      <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-[15px] min-w-[100px]" :disabled="!isObjectSelected">Move</button>
+      <button @mousedown.stop @click="zoneEditorStore.setSelectedObject(zoneEditorStore.selectedZoneObject?.object)" class="btn-cyan py-1.5 px-4" :disabled="!isObjectSelected">S</button>
+      <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24" :disabled="!isObjectSelected">Move</button>
     </div>
   </div>
 </template>
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index f10f7c8..9d75dc5 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="flex justify-center p-5">
-    <div class="toolbar fixed top-6 mx-6 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-[90%] h-10">
+    <div class="toolbar fixed top-6 mx-6 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-11/12 h-10">
       <div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
         </button>
 
-        <div class="w-[1px] bg-cyan"></div>
+        <div class="w-px bg-cyan"></div>
 
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
@@ -15,25 +15,25 @@
               {{ zoneEditorStore.drawMode }}
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
-            <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300/80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('tile')">
+            <div class="flex flex-col absolute top-full mt-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('tile')">
                 Tile
-                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('object')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('object')">
                 Object
-                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
                 Teleport
-                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
             </div>
           </div>
         </button>
 
-        <div class="w-[1px] bg-cyan"></div>
+        <div class="w-px bg-cyan"></div>
 
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
@@ -42,31 +42,31 @@
               {{ zoneEditorStore.drawMode }}
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
-            <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300/80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen">
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('tile')">
+            <div class="flex flex-col absolute top-full mt-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectEraserOpen">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('tile')">
                 Tile
-                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('object')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('object')">
                 Object
-                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
                 Teleport
-                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
             </div>
           </div>
         </button>
 
-        <div class="w-[1px] bg-cyan"></div>
+        <div class="w-px bg-cyan"></div>
 
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
         </button>
 
-        <div class="w-[1px] bg-cyan"></div>
+        <div class="w-px bg-cyan"></div>
 
         <button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()" v-if="zoneEditorStore.zone">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'settings' }">(Z)</span>
diff --git a/src/components/utilities/zoneEditor/ZoneList.vue b/src/components/utilities/zoneEditor/ZoneList.vue
index b57283b..fc9acc0 100644
--- a/src/components/utilities/zoneEditor/ZoneList.vue
+++ b/src/components/utilities/zoneEditor/ZoneList.vue
@@ -7,20 +7,20 @@
         <h3 class="text-lg">Zones</h3>
       </template>
       <template #modalBody>
-        <div class="my-[15px] mx-auto">
-          <div class="text-center mb-4 px-2 flex justify-around">
-            <button class="btn-cyan py-1.5 min-w-[48%]" @click="fetchZones">Refresh</button>
-            <button class="btn-cyan py-1.5 min-w-[48%]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
+        <div class="my-4 mx-auto">
+          <div class="text-center mb-4 px-2 flex gap-2.5">
+            <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchZones">Refresh</button>
+            <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
           </div>
           <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
-            <div class="absolute left-0 top-0 w-full h-[1px] bg-cyan-200" v-if="index === 0"></div>
+            <div class="absolute left-0 top-0 w-full h-px bg-cyan-200" v-if="index === 0"></div>
             <div class="flex gap-3 items-center w-full">
               <span @click="() => loadZone(zone.id)">{{ zone.name }}</span>
               <span class="ml-auto gap-1 flex">
                 <button class="btn-bordeaux py-0.5 px-2.5" @click="() => deleteZone(zone.id)">X</button>
               </span>
             </div>
-            <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+            <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
           </div>
         </div>
       </template>
diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
index 0208d35..b3cf0c8 100644
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@@ -5,24 +5,24 @@
     </template>
 
     <template #modalBody>
-      <div class="m-[15px]">
+      <div class="m-4">
         <form method="post" @submit.prevent="" class="inline">
           <div class="gap-2.5 flex flex-wrap">
             <div class="w-full flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Name</label>
-              <input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
+              <input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
             </div>
-            <div class="w-[48%] flex flex-col mb-5">
+            <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Width</label>
-              <input class="input-cyan max-w-[250px]" v-model="width" name="name" id="name" type="number" />
+              <input class="input-cyan max-w-64" v-model="width" name="name" id="name" type="number" />
             </div>
-            <div class="w-[48%] flex flex-col mb-5">
+            <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Height</label>
-              <input class="input-cyan max-w-[250px]" v-model="height" name="name" id="name" type="number" />
+              <input class="input-cyan max-w-64" v-model="height" name="name" id="name" type="number" />
             </div>
             <div class="w-full flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">PVP enabled</label>
-              <input class="input-cyan max-w-[250px]" name="name" id="name" />
+              <input class="input-cyan max-w-64" name="name" id="name" />
             </div>
           </div>
         </form>
diff --git a/tailwind.config.js b/tailwind.config.js
index c7cc2f9..72efae5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,9 @@ export default {
       '30px': '30px'
     },
     extend: {
+      inset: {
+        '1/6': 'calc(100% / 6)',
+      },
       invert: {
         80: '0.80'
       },