From 0080a1a941f83814f6c67143f59267dd4c56523b Mon Sep 17 00:00:00 2001
From: Dan Lynch <pyramation@gmail.com>
Date: Sun, 9 Aug 2026 09:34:59 +0000
Subject: [PATCH] fix(desktop): centre the brand and project tiles on the
 collapsed icon rail

---
 packages/desktop/src/components/ui/app-shell.tsx       |  9 +++++++--
 .../desktop/src/renderer/routes/project-switcher.tsx   | 10 +++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/desktop/src/components/ui/app-shell.tsx b/packages/desktop/src/components/ui/app-shell.tsx
index f994dcb..af3d965 100644
--- a/packages/desktop/src/components/ui/app-shell.tsx
+++ b/packages/desktop/src/components/ui/app-shell.tsx
@@ -373,12 +373,17 @@ function AccountMenu({ account, renderLink }: { account: AppAccount; renderLink?
 function Brand({ brand, renderLink }: { brand: AppShellBrand; renderLink?: AppLinkRenderer }) {
 	const content = (
 		<>
+			{/* Collapsed, the button keeps its 8px padding but the tile is the full
+			    32px rail width, so it hangs off to the right; pulling it back by the
+			    padding puts it on the same centre line as the nav icons. */}
 			{brand.logo && (
-				<div className='bg-primary text-primary-foreground flex size-8 shrink-0 items-center justify-center rounded-lg shadow-xs'>
+				<div className='bg-primary text-primary-foreground flex size-8 shrink-0 items-center justify-center rounded-lg shadow-xs group-data-[collapsible=icon]:-ml-2'>
 					{brand.logo}
 				</div>
 			)}
-			<div className='grid min-w-0 flex-1 text-left text-sm leading-tight'>
+			{/* Collapsed to the icon rail there is only room for the logo tile; leaving
+			    the text in the flex row pushes the tile off the rail's centre line. */}
+			<div className='grid min-w-0 flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden'>
 				<span className='truncate font-medium' title={typeof brand.name === 'string' ? brand.name : undefined}>
 					{brand.name}
 				</span>
diff --git a/packages/desktop/src/renderer/routes/project-switcher.tsx b/packages/desktop/src/renderer/routes/project-switcher.tsx
index 4b371eb..80070b9 100644
--- a/packages/desktop/src/renderer/routes/project-switcher.tsx
+++ b/packages/desktop/src/renderer/routes/project-switcher.tsx
@@ -37,16 +37,20 @@ export function ProjectSwitcher({ projects, current, onSelect, onManage }: Proje
               />
             }
           >
-            <div className='bg-sidebar-accent text-sidebar-accent-foreground flex size-8 shrink-0 items-center justify-center rounded-lg'>
+            {/* Pulled back by the button's collapsed padding so the tile lands on the
+                same centre line as the nav icons below it. */}
+            <div className='bg-sidebar-accent text-sidebar-accent-foreground flex size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:-ml-2'>
               <FolderOpen className='size-4' />
             </div>
-            <div className='grid min-w-0 flex-1 text-left text-sm leading-tight'>
+            {/* Collapsed, only the tile fits: keeping the label and chevron in the
+                flex row would shove the icon off the rail's centre line. */}
+            <div className='grid min-w-0 flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden'>
               <span className='text-muted-foreground truncate text-xs'>Project</span>
               <span className='truncate font-medium' title={current ?? undefined}>
                 {current ?? 'None yet'}
               </span>
             </div>
-            <ChevronsUpDown className='ml-auto size-4' />
+            <ChevronsUpDown className='ml-auto size-4 group-data-[collapsible=icon]:hidden' />
           </DropdownMenuTrigger>
           <DropdownMenuContent className='min-w-56 rounded-lg' side='bottom' align='start' sideOffset={4}>
             <DropdownMenuLabel>Switch project</DropdownMenuLabel>