From 9682461eea1189c0fc20c67e9a396c5ec5a1b9f5 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Fri, 31 Oct 2025 12:27:40 +0100
Subject: [PATCH] Refactor Tabs components for improved styling

- Update TabsList.vue to adjust height and border radius for a more modern look
- Modify TabsTrigger.vue to enhance padding, font size, and line height for better readability and user experience
---
 app/components/ui/tabs/TabsList.vue    | 14 +++++---------
 app/components/ui/tabs/TabsTrigger.vue | 13 ++++---------
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/app/components/ui/tabs/TabsList.vue b/app/components/ui/tabs/TabsList.vue
index c84898a..8ec5736 100644
--- a/app/components/ui/tabs/TabsList.vue
+++ b/app/components/ui/tabs/TabsList.vue
@@ -19,15 +19,11 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TabsList
-    v-bind="forwarded"
-    :class="
-      cn(
-        'inline-flex h-12 items-center justify-center rounded-xl bg-white/5 p-1.5 text-white/70',
-        props.class
-      )
-    "
-  >
+  <TabsList v-bind="forwarded" :class="cn(
+    'inline-flex h-auto items-center justify-center rounded-[35px] bg-white/5 p-1.5 text-white/70',
+    props.class
+  )
+    ">
     <slot />
   </TabsList>
 </template>
diff --git a/app/components/ui/tabs/TabsTrigger.vue b/app/components/ui/tabs/TabsTrigger.vue
index 2f9762b..13f412d 100644
--- a/app/components/ui/tabs/TabsTrigger.vue
+++ b/app/components/ui/tabs/TabsTrigger.vue
@@ -19,15 +19,10 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TabsTrigger
-    v-bind="forwarded"
-    :class="
-      cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-base font-medium ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md',
-        props.class
-      )
-    "
-  >
+  <TabsTrigger v-bind="forwarded" :class="cn(
+    'inline-flex items-center justify-center whitespace-nowrap rounded-[25px] px-4 py-[10px] text-lg font-medium ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md leading-[1.7em]',
+    props.class
+  )">
     <slot />
   </TabsTrigger>
 </template>