fix: sidebar layout polish and settings tab separators

[TerrifiedBug]

Summary

• Sidebar logo row now uses h-14 to match the main content header height — the separator below the logo aligns with the header's border-b
• Collapsed sidebar logo shows "Vf" (bold V + light f) instead of just "V"
• Team and environment selectors made compact and consistent: both h-8, full-width, matching text-xs style with inline icons
• Settings page tab separators use bg-muted-foreground/25 for better visibility against the muted tabs background in dark mode

Test plan

• Sidebar separator aligns horizontally with main content header border
• Collapsed sidebar shows "Vf" with correct bold/light styling
• Team selector dropdown and single-team display look clean
• Environment selector fills sidebar width
• Settings tab vertical separators are visible in both light and dark mode

[greptile-apps]

Greptile Summary

This is a UI polish PR with no logic changes. It makes three cosmetic improvements to the sidebar and settings page:

• Sidebar header alignment: The logo area is now wrapped in an h-14 div so its bottom Separator lines up exactly with the border-b of the main content header. The Separator is correctly made unconditional (shown in both expanded and collapsed states) to maintain this alignment.
• Collapsed logo: Renders "Vf" (bold + light) instead of just "V", matching the visual style of the full expanded "VectorFlow" wordmark.
• Selector compactness: Both TeamSelector (multi-team dropdown) and EnvironmentSelector are now h-8 w-full text-xs, consistent with each other. The loading skeleton in EnvironmentSelector is also corrected from h-9 w-[180px] to h-8 w-full to match the actual control it represents.
• Settings tab separators: bg-muted-foreground/25 added to vertical Separator elements between tab groups, improving visibility on the muted background in dark mode.

Confidence Score: 5/5

• This PR is safe to merge — all changes are purely cosmetic Tailwind class adjustments with no logic, data, or security implications.
• All four changed files contain only Tailwind CSS class modifications. No business logic, data fetching, state management, or security-relevant code was altered. The changes are self-contained and straightforward visual improvements.
• No files require special attention.

Important Files Changed

Filename	Overview
src/components/app-sidebar.tsx	Logo row wrapped in h-14 div for header alignment; collapsed logo updated to "Vf"; Separator is now unconditional (shown in both expanded and collapsed states, intentionally aligning with the main-content header border); second post-selector separator removed.
src/components/team-selector.tsx	Single-team display simplified to a lightweight flex row; multi-team SelectTrigger now uses fixed h-8 height and text-xs matching the environment selector style.
src/components/environment-selector.tsx	Loading skeleton updated from h-9 w-[180px] to h-8 w-full to match the SelectTrigger; trigger width changed from fixed w-[180px] to w-full for sidebar-width fill.
src/app/(dashboard)/settings/page.tsx	Three vertical Separator components in the settings tabs list have bg-muted-foreground/25 added for improved dark-mode visibility; no logic changes.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    SidebarHeader["SidebarHeader (p-0)"]
    LogoRow["Logo div h-14\n(expanded: VectorFlow | collapsed: Vf)"]
    Sep["Separator\n(always visible — aligns with main header border-b)"]
    Selectors["Context selectors div\n(hidden when collapsed)\nTeamSelector h-8 · EnvironmentSelector h-8"]
    CollapsedIcons["Collapsed popover icons\n(Users + Layers icon buttons)"]

    SidebarHeader --> LogoRow
    LogoRow --> Sep
    Sep --> Selectors
    Sep --> CollapsedIcons

    Selectors -. "expanded mode" .-> TeamSelector["TeamSelector\n1 team: flex row\nN teams: Select h-8 text-xs"]
    Selectors -. "expanded mode" .-> EnvSelector["EnvironmentSelector\nSkeleton h-8 w-full\nSelect h-8 w-full text-xs"]

Loading

_{Last reviewed commit: 48a4844}