UPD: Selection outlines

src/components/config/TabSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex font-heading">
+  <div class="flex font-heading px-4 py-2 gap-2">
     <TabSelectButton
       v-for="(option, key) in options" :key="key"
       :title="$t(option.titleKey)"

src/components/config/TabSelectButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
-    class="flex-1 flex flex-col items-center rounded-xl my-1 mx-0.5 p-1 gap-2"
-    :class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
+    class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2"
+    :class="{'text-black bg-zinc-300 hover:bg-zinc-200 outline outline-zinc-100': selected,
     'hover:bg-zinc-800 text-muted-foreground' : !selected}"
     @click="$emit('select'); $refs.title.scramble()">
     <slot v-if="$slots['replace']" name="replace" />