Bug: macOS traffic light buttons (close/minimize) overlap with Agent Orchestrator logo in sidebar

[i-trytoohard]

Bug Description

On macOS, the native window controls (traffic light buttons — close, minimize, maximize) overlap with the Agent Orchestrator logo and branding text in the top-left corner of the sidebar.

Steps to Reproduce

1. Open the AO web dashboard on macOS (in an Electron/Tauri wrapper or browser window positioned at the top-left of the screen where traffic lights render)
2. Look at the top-left corner of the sidebar
3. Observe that the traffic light buttons sit directly on top of (or adjacent to) the Agent Orchestrator logo and title text

Expected Behavior

The sidebar header should account for the macOS traffic light region (~70px on the left side). The logo and branding should be positioned with enough padding to not collide with the native window controls.

Actual Behavior

The logo and "Agent Orchestrator" branding text are rendered in the same position as the macOS traffic light buttons, causing visual overlap.

Screenshot

See attached screenshot in the comment below.

Environment

• OS: macOS
• Component: Web dashboard sidebar (packages/web/src/components/Dashboard.tsx or sidebar layout)

Suggested Fix

Add macOS-specific left padding/drag region to the sidebar header. A common pattern:

/* macOS: Reserve space for traffic lights */
.platform-darwin .sidebar-header {
  padding-left: 80px;
  -webkit-app-region: drag;
}

Or use env(titlebar-area-x) for PWA/Electron title bar overlays.

[i-trytoohard]

Screenshot

As shown, the macOS close/minimize/maximize buttons (traffic lights) overlap with the Agent Orchestrator logo and branding text in the top-left corner of the sidebar.

⚠️ This screenshot is hosted on a temporary URL. Please re-attach permanently via GitHub's browser drag-and-drop if needed.