From 4003df46262a099b4b80884eee20189d393db08c Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Fri, 22 Nov 2024 19:30:09 +0100
Subject: [PATCH] Improve tab layout and add hover effect (#4431)

---
 web/src/components/layout/scaffold/Tabs.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 78f821557..a1a2a4f8d 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -1,18 +1,25 @@
 <template>
-  <div class="flex flex-wrap">
+  <div class="flex flex-wrap mt-2 md:gap-4">
     <router-link
       v-for="tab in tabs"
       :key="tab.title"
       v-slot="{ isActive, isExactActive }"
       :to="tab.to"
-      class="border-transparent w-full py-1 md:py-2 md:w-auto md:px-6 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
+      class="border-transparent w-full py-1 md:w-auto flex cursor-pointer md:border-b-2 text-wp-text-100 items-center"
       :active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
       :exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
     >
-      <Icon v-if="isExactActive || (isActive && tab.matchChildren)" name="chevron-right" class="md:hidden" />
+      <Icon
+        v-if="isExactActive || (isActive && tab.matchChildren)"
+        name="chevron-right"
+        class="md:hidden flex-shrink-0"
+        size="20"
+      />
       <Icon v-else name="blank" class="md:hidden" />
-      <span class="flex gap-2 items-center flex-row">
-        <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />
+      <span
+        class="flex gap-2 items-center md:justify-center flex-row py-1 px-2 w-full min-w-20 hover:bg-wp-background-200 rounded-md"
+      >
+        <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" size="20" />
         <span>{{ tab.title }}</span>
         <CountBadge v-if="tab.count" :value="tab.count" />
       </span>