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

fix(ui): prevent logo from overlapping macOS traffic light buttons
This commit is contained in:
Web Dev Cody
2025-12-22 13:23:05 -05:00
committed by GitHub
2 changed files with 15 additions and 2 deletions

View File

@@ -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} />

View File

@@ -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));