From 43efab863b70546e1a21c5604495e4894f9801b4 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sun, 4 Feb 2024 01:45:56 +0100
Subject: [PATCH] UPD: TabSelect

---
 src/components/config/TabSelect.vue       | 9 +++++++--
 src/components/config/TabSelectButton.vue | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/config/TabSelect.vue b/src/components/config/TabSelect.vue
index 986e68e..9abad10 100644
--- a/src/components/config/TabSelect.vue
+++ b/src/components/config/TabSelect.vue
@@ -2,7 +2,7 @@
   <div class="relative">
     <div
       :style="backgroundStyle"
-      class="absolute bg-zinc-300 outline outline-zinc-100 rounded-xl transition-all ease-out duration-75" />
+      class="absolute bg-zinc-300 outline outline-zinc-100 rounded-xl transition-all duration-75 ease-out" />
     <div class="flex font-heading px-4 py-2 gap-2 relative">
       <TabSelectButton
         v-for="(option, key) in options" :key="key"
@@ -29,7 +29,12 @@ const model = defineModel({
 
 const buttons = ref({})
 
-const backgroundStyle = ref({})
+const backgroundStyle = ref({
+  top: '0',
+  left: '0',
+  width: '0',
+  height: '0',
+})
 
 const updateBackgroundStyle = () => {
   const selected = buttons.value[model.value]
diff --git a/src/components/config/TabSelectButton.vue b/src/components/config/TabSelectButton.vue
index 40bf7be..995a9eb 100644
--- a/src/components/config/TabSelectButton.vue
+++ b/src/components/config/TabSelectButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2 transition-colors"
-    :class="{'text-black hover:bg-zinc-200': selected,
+    :class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
     'hover:bg-zinc-800 text-muted-foreground' : !selected}"
     @click="$emit('select'); $refs.title.scramble()">
     <slot v-if="$slots['replace']" name="replace" />