feat: enhance BadgeTabs and Tabs components with utility class integration

Refactored the BadgeTabs component to utilize the `cn` utility for class name management, improving layout consistency. Updated the Tabs component to conditionally apply flex direction based on orientation, enhancing responsiveness. These changes streamline the styling process and ensure a more cohesive user interface across tabbed components.

apps/web/src/components/badge-tabs.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react'
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import { cn } from '@evobgp/ui/lib/utils'
 
 import { Badge } from '@/components/reui/badge'
 
@@ -39,9 +40,15 @@ export function BadgeTabs({
       value={value}
       defaultValue={defaultValue}
       onValueChange={onValueChange}
-      className={className}
+      className={cn('w-full', className)}
     >
-      <TabsList variant="line" className={listClassName ?? 'mb-3.5 w-full'}>
+      <TabsList
+        variant="line"
+        className={cn(
+          'mb-4 w-full justify-start gap-6',
+          listClassName,
+        )}
+      >
         {items.map((item) => (
           <TabsTrigger key={item.value} value={item.value} className="gap-2">
             {item.icon}
@@ -54,7 +61,7 @@ export function BadgeTabs({
           </TabsTrigger>
         ))}
       </TabsList>
-      <div className={contentClassName}>{children}</div>
+      <div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
     </Tabs>
   )
 }