Fix Search and Tab styles

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTabs.tsx

@@ -29,36 +29,33 @@ export function SupportTabs({
   ];
 
   return (
-    <div className="flex flex-col gap-4 mb-6 sm:flex-row sm:items-center">
+    <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
       {/* Search Bar */}
       <div className="relative flex-1">
         <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
         <Input
-          className="pl-10 w-full bg-background border-border text-foreground placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-primary"
+          className="pl-9 bg-card"
           onChange={(e) => onSearchChange(e.target.value)}
-          placeholder="Search cases..."
+          placeholder="Search"
           value={searchQuery}
         />
       </div>
 
       {/* Tab Buttons */}
-      <div className="grid w-full grid-cols-3 bg-background border border-border p-1 rounded-lg sm:w-fit">
+      <div className="grid w-full grid-cols-3 bg-background border border-border p-1 rounded-lg sm:w-fit gap-0.5">
         {tabs.map((tab) => (
           <Button
             className={cn(
-              "h-8 px-2 py-1 font-medium text-sm transition-colors rounded-md sm:px-3",
+              "h-8 px-2 py-1 text-sm transition-colors rounded-sm sm:px-3",
               activeTab === tab.id
                 ? "bg-accent text-foreground"
-                : "text-muted-foreground hover:text-foreground",
+                : "text-muted-foreground hover:text-foreground hover:bg-accent/70",
             )}
             key={tab.id}
             onClick={() => onTabChange(tab.id)}
             variant="ghost"
           >
-            <span className="hidden sm:inline">
-              {tab.label} ({tab.count})
-            </span>
-            <span className="sm:hidden">{tab.label}</span>
+            <span>{tab.label}</span>
           </Button>
         ))}
       </div>