Merge pull request #217 from JBotwina/fix/176-logo-macos-buttons-overlap

webdevcody · web-flow · commit 6a8b2067fd67 · 2025-12-22T13:23:05.000-05:00
fix(ui): prevent logo from overlapping macOS traffic light buttons
diff --git a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx
@@ -1,5 +1,5 @@
 import type { NavigateOptions } from '@tanstack/react-router';
-import { cn } from '@/lib/utils';
+import { cn, isMac } from '@/lib/utils';
 import { AutomakerLogo } from './automaker-logo';
 import { BugReportButton } from './bug-report-button';
 
@@ -20,7 +20,9 @@ export function SidebarHeader({ sidebarOpen, navigate }: SidebarHeaderProps) {
           // Background gradient for depth
           'bg-gradient-to-b from-transparent to-background/5',
           'flex items-center',
-          sidebarOpen ? 'px-3 lg:px-5 justify-start' : 'px-3 justify-center'
+          sidebarOpen ? 'px-3 lg:px-5 justify-start' : 'px-3 justify-center',
+          // Add left padding on macOS to avoid overlapping with traffic light buttons
+          isMac && 'pt-4 pl-20'
         )}
       >
         <AutomakerLogo sidebarOpen={sidebarOpen} navigate={navigate} />
diff --git a/apps/ui/src/lib/utils.ts b/apps/ui/src/lib/utils.ts
@@ -52,3 +52,14 @@ export function pathsEqual(p1: string | undefined | null, p2: string | undefined
   if (!p1 || !p2) return p1 === p2;
   return normalizePath(p1) === normalizePath(p2);
 }
+
+/**
+ * Detect if running on macOS.
+ * Checks Electron process.platform first, then falls back to navigator APIs.
+ */
+export const isMac =
+  typeof process !== 'undefined' && process.platform === 'darwin'
+    ? true
+    : typeof navigator !== 'undefined' &&
+      (/Mac/.test(navigator.userAgent) ||
+        (navigator.platform ? navigator.platform.toLowerCase().includes('mac') : false));
