From 1aa07daa35f5b43285e4c5797590cb82e6692456 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 19 Oct 2024 22:25:25 +0200
Subject: [PATCH] Also added overflow to tile group

---
 .../zoneEditor/partials/TileList.vue          | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/components/gameMaster/zoneEditor/partials/TileList.vue b/src/components/gameMaster/zoneEditor/partials/TileList.vue
index 66feb9e..9455f67 100644
--- a/src/components/gameMaster/zoneEditor/partials/TileList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TileList.vue
@@ -42,35 +42,37 @@
           </div>
         </div>
       </div>
-      <div v-else class="p-4">
-        <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
-        <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
-        <div class="grid grid-cols-8 gap-2 justify-items-center">
-          <div class="flex flex-col items-center justify-center">
-            <img
-              class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
-              :src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
-              :alt="selectedGroup.parent.name"
-              @click="selectTile(selectedGroup.parent)"
-              :class="{
-                'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent),
-                'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
-              }"
-            />
-            <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
-          </div>
-          <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
-            <img
-              class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
-              :src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
-              :alt="childTile.name"
-              @click="selectTile(childTile)"
-              :class="{
-                'border-cyan shadow-lg scale-105': isActiveTile(childTile),
-                'border-transparent hover:border-gray-300': !isActiveTile(childTile)
-              }"
-            />
-            <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
+      <div v-else class="h-full overflow-auto">
+        <div class="p-4">
+          <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
+          <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
+          <div class="grid grid-cols-8 gap-2 justify-items-center">
+            <div class="flex flex-col items-center justify-center">
+              <img
+                class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
+                :src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
+                :alt="selectedGroup.parent.name"
+                @click="selectTile(selectedGroup.parent)"
+                :class="{
+                  'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent),
+                  'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
+                }"
+              />
+              <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
+            </div>
+            <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
+              <img
+                class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
+                :src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
+                :alt="childTile.name"
+                @click="selectTile(childTile)"
+                :class="{
+                  'border-cyan shadow-lg scale-105': isActiveTile(childTile),
+                  'border-transparent hover:border-gray-300': !isActiveTile(childTile)
+                }"
+              />
+              <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
+            </div>
           </div>
         </div>
       </div>