fix: sidebar layout polish — aligned header, compact selectors, settings tabs (#74)

- Sidebar logo row now uses h-14 to match main content header height,
  aligning the separator with the header's border-b
- Collapsed logo shows "Vf" instead of just "V"
- Team and environment selectors made compact and consistent (both h-8,
  full-width, matching text-xs style)
- Settings tab separators use bg-muted-foreground/25 for better
  visibility against the muted tabs background

Author: TerrifiedBug

src/app/(dashboard)/settings/page.tsx

@@ -3400,12 +3400,12 @@ export default function SettingsPage() {
           )}
           {isSuperAdmin && (
             <>
-              {isTeamAdmin && <Separator orientation="vertical" className="h-5" />}
+              {isTeamAdmin && <Separator orientation="vertical" className="h-5 bg-muted-foreground/25" />}
               <TabsTrigger value="auth">
                 <Shield className="mr-2 h-4 w-4" />
                 Auth
               </TabsTrigger>
-              <Separator orientation="vertical" className="h-5" />
+              <Separator orientation="vertical" className="h-5 bg-muted-foreground/25" />
               <TabsTrigger value="users">
                 <Users className="mr-2 h-4 w-4" />
                 Users
@@ -3414,7 +3414,7 @@ export default function SettingsPage() {
                 <Layers className="mr-2 h-4 w-4" />
                 Teams
               </TabsTrigger>
-              <Separator orientation="vertical" className="h-5" />
+              <Separator orientation="vertical" className="h-5 bg-muted-foreground/25" />
               <TabsTrigger value="fleet">
                 <Server className="mr-2 h-4 w-4" />
                 Fleet

src/components/app-sidebar.tsx

@@ -85,20 +85,23 @@ export function AppSidebar() {
 
   return (
     <Sidebar collapsible="icon">
-      <SidebarHeader className="px-4 pt-3 pb-0 group-data-[collapsible=icon]:px-2">
-        <Link href="/" className="flex items-center gap-2 py-1">
-          <span className="text-xl tracking-tight group-data-[collapsible=icon]:hidden">
-            <span className="font-bold">Vector</span>
-            <span className="font-light">Flow</span>
-          </span>
-          <span className="hidden text-xl font-bold group-data-[collapsible=icon]:block">V</span>
-        </Link>
-        <Separator className="my-2 group-data-[collapsible=icon]:hidden" />
-        <div className="px-3 pb-3 space-y-2 group-data-[collapsible=icon]:hidden">
+      <SidebarHeader className="p-0 group-data-[collapsible=icon]:p-0">
+        {/* Logo row — matches the h-14 main content header for border alignment */}
+        <div className="flex h-14 items-center px-4 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2">
+          <Link href="/" className="flex items-center gap-2">
+            <span className="text-xl tracking-tight group-data-[collapsible=icon]:hidden">
+              <span className="font-bold">Vector</span>
+              <span className="font-light">Flow</span>
+            </span>
+            <span className="hidden text-xl group-data-[collapsible=icon]:block"><span className="font-bold">V</span><span className="font-light">f</span></span>
+          </Link>
+        </div>
+        <Separator />
+        {/* Context selectors */}
+        <div className="space-y-1.5 p-3 group-data-[collapsible=icon]:hidden">
           <TeamSelector />
           <EnvironmentSelector />
         </div>
-        <Separator className="group-data-[collapsible=icon]:hidden" />
         {/* Collapsed mode: icon buttons with popovers */}
         <div className="hidden group-data-[collapsible=icon]:flex flex-col items-center gap-1 py-2">
           <Popover>

src/components/environment-selector.tsx

@@ -75,7 +75,7 @@ export function EnvironmentSelector() {
   }, [selectedEnvironmentId, systemEnvironment, setIsSystemEnvironment]);
 
   if (envsQuery.isLoading) {
-    return <Skeleton className="h-9 w-[180px]" />;
+    return <Skeleton className="h-8 w-full" />;
   }
 
   if (environments.length === 0 && !systemEnvironment) {
@@ -94,7 +94,7 @@ export function EnvironmentSelector() {
       value={selectedEnvironmentId ?? ""}
       onValueChange={handleEnvironmentChange}
     >
-      <SelectTrigger className="h-8 w-[180px] text-xs">
+      <SelectTrigger className="h-8 w-full text-xs">
         <Layers className="mr-1.5 h-3.5 w-3.5 text-muted-foreground" />
         <SelectValue placeholder="Select environment" />
       </SelectTrigger>

src/components/team-selector.tsx

@@ -40,24 +40,18 @@ export function TeamSelector() {
   // Single team — show name only, no dropdown
   if (teams.length === 1) {
     return (
-      <div className="flex items-center gap-2 rounded-md border bg-card px-3 py-2">
-        <div className="flex h-6 w-6 items-center justify-center rounded bg-primary/10 text-primary">
-          <Users className="h-3.5 w-3.5" />
-        </div>
-        <span className="text-sm font-medium truncate">{teams[0].name}</span>
+      <div className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm">
+        <Users className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <span className="font-medium truncate">{teams[0].name}</span>
       </div>
     );
   }
 
   return (
     <Select value={selectedTeamId ?? undefined} onValueChange={setSelectedTeamId}>
-      <SelectTrigger className="w-full h-auto border-sidebar-border bg-sidebar px-3 py-2 text-sm">
-        <div className="flex items-center gap-2">
-          <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-primary/10 text-primary">
-            <Users className="h-3.5 w-3.5" />
-          </div>
-          <SelectValue placeholder="Select team" />
-        </div>
+      <SelectTrigger className="w-full h-8 text-xs">
+        <Users className="mr-1.5 h-3.5 w-3.5 text-muted-foreground" />
+        <SelectValue placeholder="Select team" />
       </SelectTrigger>
       <SelectContent>
         {teams.map((team) => (