fix: align account selector header height with search/reply toolbars

This commit is contained in:
Linus Rath
2026-06-02 01:19:37 +02:00
parent 8f7066d194
commit 9953557af0
+26 -22
View File
@@ -942,30 +942,34 @@ export function Sidebar({
{/* Header - hidden in the Pro shell, which owns its own chrome and {/* Header - hidden in the Pro shell, which owns its own chrome and
would otherwise render an empty strip (no collapse, no switcher). */} would otherwise render an empty strip (no collapse, no switcher). */}
{!isEmbedded && ( {!isEmbedded && (
<div className={cn("flex items-center border-b border-border h-14", isCollapsed ? "justify-center px-2" : "gap-1 px-2")}> // Border lives on the wrapper (outside the h-14 box) so the bar's total
<Button // height matches the search/reply toolbars, which border-b their wrapper too.
variant="ghost" <div className="border-b border-border">
size="icon" <div className={cn("flex items-center h-14", isCollapsed ? "justify-center px-2" : "gap-1 px-2")}>
onClick={onSidebarClose} <Button
className="lg:hidden h-9 w-9 flex-shrink-0" variant="ghost"
aria-label={t("close")} size="icon"
> onClick={onSidebarClose}
<X className="w-5 h-5" /> className="lg:hidden h-9 w-9 flex-shrink-0"
</Button> aria-label={t("close")}
>
<X className="w-5 h-5" />
</Button>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={toggleSidebarCollapsed} onClick={toggleSidebarCollapsed}
className="hidden lg:flex h-8 w-8 flex-shrink-0" className="hidden lg:flex h-8 w-8 flex-shrink-0"
title={isCollapsed ? t("expand_tooltip") : t("collapse_tooltip")} title={isCollapsed ? t("expand_tooltip") : t("collapse_tooltip")}
> >
{isCollapsed ? <ChevronsRight className="w-4 h-4" /> : <ChevronsLeft className="w-4 h-4" />} {isCollapsed ? <ChevronsRight className="w-4 h-4" /> : <ChevronsLeft className="w-4 h-4" />}
</Button> </Button>
{!isCollapsed && !hideAccountSwitcher && ( {!isCollapsed && !hideAccountSwitcher && (
<AccountSwitcher variant="expanded" className="flex-1" /> <AccountSwitcher variant="expanded" className="flex-1" />
)} )}
</div>
</div> </div>
)} )}