From 94f8398545677006e1a1792c7730c9dd1cf094a6 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Wed, 21 Aug 2024 21:21:43 +0200
Subject: [PATCH] UX improvement in zone list

---
 src/components/utilities/zoneEditor/partials/ZoneList.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/utilities/zoneEditor/partials/ZoneList.vue b/src/components/utilities/zoneEditor/partials/ZoneList.vue
index 428118d..1e6b9b0 100644
--- a/src/components/utilities/zoneEditor/partials/ZoneList.vue
+++ b/src/components/utilities/zoneEditor/partials/ZoneList.vue
@@ -14,10 +14,10 @@
           </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-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>
+            <div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
+              <span>{{ 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>
+                <button class="btn-bordeaux py-0.5 px-2.5 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
               </span>
             </div>
             <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>