refactor: updated tab bar design

Author: kmendell

frontend/src/lib/components/tab-bar/tab-bar.svelte

@@ -13,7 +13,7 @@
 	let { items, onValueChange, class: className }: Props = $props();
 </script>
 
-<Tabs.List class={cn('scrollbar-hide flex w-full justify-start gap-4 overflow-x-auto', className)}>
+<Tabs.List class={cn('scrollbar-hide inline-flex max-w-full justify-start gap-1 overflow-x-auto', className)}>
 	{#each items as item}
 		{@const IconComponent = item.icon}
 		<Tabs.Trigger

frontend/src/lib/components/ui/tabs/tabs-list.svelte

@@ -8,7 +8,7 @@
 <TabsPrimitive.List
 	bind:ref
 	class={cn(
-		'text-muted-foreground inline-flex h-10 items-center justify-center rounded-lg bg-black/5 p-1 backdrop-blur-lg dark:bg-white/5',
+		'text-muted-foreground inline-flex h-10 items-center justify-center rounded-full border border-black/5 bg-black/5 p-1 shadow-sm backdrop-blur-xl backdrop-saturate-150 dark:border-white/10 dark:bg-white/5',
 		className
 	)}
 	{...restProps}

frontend/src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -8,7 +8,7 @@
 <TabsPrimitive.Trigger
 	bind:ref
 	class={cn(
-		'ring-offset-background focus-visible:ring-ring hover:bg-primary/5 data-[state=active]:bg-primary/15 data-[state=active]:text-primary inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
+		'ring-offset-background focus-visible:ring-ring hover:bg-primary/5 data-[state=active]:bg-primary/15 data-[state=active]:text-primary inline-flex items-center justify-center rounded-full px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
 		className
 	)}
 	{...restProps}

frontend/src/routes/(app)/dashboard/+page.svelte

@@ -429,7 +429,7 @@
 
 <Tabs.Root value={activeView} class="w-full">
 	<div class="pt-3 md:pt-4">
-		<TabBar items={viewTabs} value={activeView} onValueChange={handleViewChange} class="w-full" />
+		<TabBar items={viewTabs} value={activeView} onValueChange={handleViewChange} />
 	</div>
 
 	{#if activeView === 'all'}

frontend/src/routes/(app)/environments/[id]/+page.svelte

@@ -619,7 +619,7 @@
 
 	<Tabs.Root bind:value={activeTab} class="w-full">
 		<div class="my-4">
-			<TabBar items={tabItems} value={activeTab} onValueChange={handleTabChange} class="w-full" />
+			<TabBar items={tabItems} value={activeTab} onValueChange={handleTabChange} />
 		</div>
 
 		<Tabs.Content value="details">