UPD: TabSelect

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]

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" />