From bdd2f93175e43d6ed06c7f7ae769b655e4a650a4 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 4 Jan 2025 22:41:20 +0100
Subject: [PATCH] Added gap between list elements

(Cyan boxes touched when 1 item was selected and other was hovered over)
---
 .../assetManager/partials/characterHair/CharacterHairList.vue   | 2 +-
 .../assetManager/partials/characterType/CharacterTypeList.vue   | 2 +-
 .../gameMaster/assetManager/partials/item/itemList.vue          | 2 +-
 .../assetManager/partials/mapObject/MapObjectList.vue           | 2 +-
 .../gameMaster/assetManager/partials/sprite/SpriteList.vue      | 2 +-
 .../gameMaster/assetManager/partials/tile/TileList.vue          | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
index e675c4a..190d6be 100644
--- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
@@ -10,7 +10,7 @@
     </label>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a
         v-for="{ data: characterHair } in list"
         :key="characterHair.id"
diff --git a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
index 0555677..3de9e82 100644
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
@@ -10,7 +10,7 @@
     </label>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a
         v-for="{ data: characterType } in list"
         :key="characterType.id"
diff --git a/src/components/gameMaster/assetManager/partials/item/itemList.vue b/src/components/gameMaster/assetManager/partials/item/itemList.vue
index b985ac1..9100f72 100644
--- a/src/components/gameMaster/assetManager/partials/item/itemList.vue
+++ b/src/components/gameMaster/assetManager/partials/item/itemList.vue
@@ -10,7 +10,7 @@
     </label>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a v-for="{ data: item } in list" :key="item.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedItem?.id === item.id }" @click="assetManagerStore.setSelectedItem(item as Item)">
         <div class="flex items-center gap-2.5">
           <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedItem?.id === item.id }">
diff --git a/src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue b/src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue
index 3b6748c..e0f1a61 100644
--- a/src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue
+++ b/src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue
@@ -9,7 +9,7 @@
     </label>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a v-for="{ data: mapObject } in list" :key="mapObject.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedMapObject?.id === mapObject.id }" @click="assetManagerStore.setSelectedMapObject(mapObject as MapObject)">
         <div class="flex items-center gap-2.5">
           <div class="h-7 w-16 max-w-16 flex justify-center">
diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
index 6669488..2488636 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
@@ -8,7 +8,7 @@
     </button>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
         <div class="flex items-center gap-2.5">
           <span :class="{ 'text-white': assetManagerStore.selectedSprite?.id === sprite.id }">{{ sprite.name }}</span>
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileList.vue b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
index f546340..60a2f8c 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileList.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
@@ -9,7 +9,7 @@
     </label>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
         <div class="flex items-center gap-2.5">
           <div class="h-7 w-16 max-w-16 flex justify-center">