From f17d062440ee5029411b6798993e7c354435cb05 Mon Sep 17 00:00:00 2001 From: James Date: Mon, 22 Dec 2025 12:28:06 -0500 Subject: [PATCH 1/5] 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' )} > From a2030d5877714e1106c54e60dedde77dda29d651 Mon Sep 17 00:00:00 2001 From: James Botwina <34082590+JBotwina@users.noreply.github.com> Date: Mon, 22 Dec 2025 12:33:42 -0500 Subject: [PATCH 2/5] Update apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- .../src/components/layout/sidebar/components/sidebar-header.tsx | 2 +- 1 file changed, 1 insertion(+), 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 6e75e975..184b8f82 100644 --- a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx +++ b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx @@ -5,7 +5,7 @@ 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; + typeof navigator !== 'undefined' && navigator.userAgentData?.platform === 'macOS'; interface SidebarHeaderProps { sidebarOpen: boolean; From 64bf02d59cd3c9b165cc84180b2d13e872f485bb Mon Sep 17 00:00:00 2001 From: James Date: Mon, 22 Dec 2025 12:36:56 -0500 Subject: [PATCH 3/5] fix --- .../components/layout/sidebar/components/sidebar-header.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 184b8f82..72e14a68 100644 --- a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx +++ b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx @@ -4,8 +4,7 @@ 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.userAgentData?.platform === 'macOS'; +const isMac = typeof navigator !== 'undefined' && /Mac/.test(navigator.userAgent); interface SidebarHeaderProps { sidebarOpen: boolean; From 3c48b2ceb74525261b5233b85b381435aea24c6f Mon Sep 17 00:00:00 2001 From: James Date: Mon, 22 Dec 2025 12:40:56 -0500 Subject: [PATCH 4/5] add more robust util fn --- .../layout/sidebar/components/sidebar-header.tsx | 5 +---- apps/ui/src/lib/utils.ts | 10 ++++++++++ 2 files changed, 11 insertions(+), 4 deletions(-) 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 72e14a68..d209988e 100644 --- a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx +++ b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx @@ -1,11 +1,8 @@ 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'; -// Detect if running on macOS for traffic light button spacing -const isMac = typeof navigator !== 'undefined' && /Mac/.test(navigator.userAgent); - interface SidebarHeaderProps { sidebarOpen: boolean; navigate: (opts: NavigateOptions) => void; diff --git a/apps/ui/src/lib/utils.ts b/apps/ui/src/lib/utils.ts index 6d65e3e7..9aba7991 100644 --- a/apps/ui/src/lib/utils.ts +++ b/apps/ui/src/lib/utils.ts @@ -52,3 +52,13 @@ 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?.toLowerCase().includes('mac')); From 53c1a464093ecca17c28cdd12087ac9ee08a36c6 Mon Sep 17 00:00:00 2001 From: James Date: Mon, 22 Dec 2025 12:49:53 -0500 Subject: [PATCH 5/5] .includes is never called on undefined --- apps/ui/src/lib/utils.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/ui/src/lib/utils.ts b/apps/ui/src/lib/utils.ts index 9aba7991..82ad7452 100644 --- a/apps/ui/src/lib/utils.ts +++ b/apps/ui/src/lib/utils.ts @@ -61,4 +61,5 @@ export const isMac = typeof process !== 'undefined' && process.platform === 'darwin' ? true : typeof navigator !== 'undefined' && - (/Mac/.test(navigator.userAgent) || navigator.platform?.toLowerCase().includes('mac')); + (/Mac/.test(navigator.userAgent) || + (navigator.platform ? navigator.platform.toLowerCase().includes('mac') : false));