From f17d062440ee5029411b6798993e7c354435cb05 Mon Sep 17 00:00:00 2001 From: James Date: Mon, 22 Dec 2025 12:28:06 -0500 Subject: [PATCH] fix(ui): prevent logo from overlapping macOS traffic light buttons Add platform detection to apply additional left padding (pl-20) and top padding (pt-4) on macOS to prevent the sidebar header/logo from overlapping with the native window control buttons (close, minimize, maximize). Fixes #176 --- .../layout/sidebar/components/sidebar-header.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx index 093474c0..6e75e975 100644 --- a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx +++ b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx @@ -3,6 +3,10 @@ import { cn } from '@/lib/utils'; import { AutomakerLogo } from './automaker-logo'; import { BugReportButton } from './bug-report-button'; +// Detect if running on macOS for traffic light button spacing +const isMac = + typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0; + interface SidebarHeaderProps { sidebarOpen: boolean; navigate: (opts: NavigateOptions) => void; @@ -20,7 +24,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' )} >