authorgravatar for crazywolf132@gmail.com0x1f99d <crazywolf132@gmail.com> 2026-03-09 12:56:29+11:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-03-08 18:56:29-07:00
loga20815ece6ea877a2b82072339f4bced98d757f7
treef68ef83fb73061c99ecfcca15601b5fd94948afa
parent1c43bad705bd1d953fd168aa0b852c8b2d83ee84
signature Signed by PGP key B5690EEEBB952194

fix(web): align sidebar logo with macOS traffic light buttons (#586)

Adjust the Electron sidebar header to properly center the T3 wordmark with the native window controls. The logo was sitting ~2px too low and ~8px too close to the traffic lights. - Reduce wordmark container top margin from mt-2 (8px) to mt-1.5 (6px) - Increase Electron header left padding from 82px to 90px for proper traffic light clearance - Match the desktop update button margin to stay aligned Closes #564

1 files changed, 3 insertions(+), 3 deletions(-)

apps/web/src/components/Sidebar.tsx+3-3
...@@ -984,7 +984,7 @@ export default function Sidebar() {...@@ -984,7 +984,7 @@ export default function Sidebar() {
984 const wordmark = (984 const wordmark = (
985 <div className="flex items-center gap-2">985 <div className="flex items-center gap-2">
986 <SidebarTrigger className="shrink-0 md:hidden" />986 <SidebarTrigger className="shrink-0 md:hidden" />
987 <div className="flex min-w-0 flex-1 items-center gap-1 mt-2 ml-1">987 <div className="flex min-w-0 flex-1 items-center gap-1 mt-1.5 ml-1">
988 <T3Wordmark />988 <T3Wordmark />
989 <span className="truncate text-sm font-medium tracking-tight text-muted-foreground">989 <span className="truncate text-sm font-medium tracking-tight text-muted-foreground">
990 Code990 Code
...@@ -1000,7 +1000,7 @@ export default function Sidebar() {...@@ -1000,7 +1000,7 @@ export default function Sidebar() {
1000 <>1000 <>
1001 {isElectron ? (1001 {isElectron ? (
1002 <>1002 <>
1003 <SidebarHeader className="drag-region h-[52px] flex-row items-center gap-2 px-4 py-0 pl-[82px]">1003 <SidebarHeader className="drag-region h-[52px] flex-row items-center gap-2 px-4 py-0 pl-[90px]">
1004 {wordmark}1004 {wordmark}
1005 {showDesktopUpdateButton && (1005 {showDesktopUpdateButton && (
1006 <Tooltip>1006 <Tooltip>
...@@ -1011,7 +1011,7 @@ export default function Sidebar() {...@@ -1011,7 +1011,7 @@ export default function Sidebar() {
1011 aria-label={desktopUpdateTooltip}1011 aria-label={desktopUpdateTooltip}
1012 aria-disabled={desktopUpdateButtonDisabled || undefined}1012 aria-disabled={desktopUpdateButtonDisabled || undefined}
1013 disabled={desktopUpdateButtonDisabled}1013 disabled={desktopUpdateButtonDisabled}
1014 className={`inline-flex size-7 ml-auto mt-2 items-center justify-center rounded-md text-muted-foreground transition-colors ${desktopUpdateButtonInteractivityClasses} ${desktopUpdateButtonClasses}`}1014 className={`inline-flex size-7 ml-auto mt-1.5 items-center justify-center rounded-md text-muted-foreground transition-colors ${desktopUpdateButtonInteractivityClasses} ${desktopUpdateButtonClasses}`}
1015 onClick={handleDesktopUpdateButtonClick}1015 onClick={handleDesktopUpdateButtonClick}
1016 >1016 >
1017 <RocketIcon className="size-3.5" />1017 <RocketIcon className="size-3.5" />