From 51da785383d3f956d8125e43354287243a527178 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Mon, 29 Jun 2026 23:40:29 -0700
Subject: [PATCH] fix(wails): fix macOS title bar overlap and drag on buttons

The hidden inset title bar drew toolbar controls under traffic lights
and the native 50px drag zone intercepted button clicks. Use explicit
drag regions and macOS safe-area padding instead.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/App.svelte            | 62 +++++++++++++++++++++---------
 frontend/src/lib/platform/wails.ts | 10 +++++
 main.go                            |  2 +-
 3 files changed, 54 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/lib/platform/wails.ts

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 8e34d9e..ef2dc4f 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -11,6 +11,7 @@
   } from './lib/keyboard';
   import { downloadProject, exportAudio, loadProject } from './lib/project';
   import { openProject, openVideo } from './lib/platform/files';
+  import { isMacOS } from './lib/platform/wails';
   import {
     addMarker,
     app,
@@ -33,6 +34,7 @@
   let controller: VideoController | null = null;
   let audioEngine = createAudioEngine();
   let statusMessage = $state('');
+  const macos = isMacOS();
   let lastScheduledTime = -1;
   const pendingPresses = new Map<string, string>();
 
@@ -198,16 +200,15 @@
 </script>
 
 <div class="app">
-  <header class="toolbar">
-    <div class="file-actions">
+  <header class="titlebar" class:macos>
+    <div class="titlebar-drag" aria-hidden="true"></div>
+    <div class="titlebar-actions">
       <button type="button" onclick={handleOpenVideo}>Open Video</button>
       <button type="button" onclick={handleOpenProject}>Open Project</button>
       <button type="button" onclick={() => void downloadProject()}>Save Project</button>
       <button type="button" onclick={handleExportAudio}>Export Audio</button>
-    </div>
-    <div class="meta">
       {#if app.videoName}
-        <span>{app.videoName}</span>
+        <span class="video-name">{app.videoName}</span>
       {/if}
       {#if app.duration}
         <label class="fps-control">
@@ -318,22 +319,52 @@
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    padding: 1rem;
+    padding: 0 1rem 1rem;
     box-sizing: border-box;
   }
 
-  .toolbar {
+  .titlebar {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
+    flex-wrap: nowrap;
     align-items: center;
-    justify-content: space-between;
+    gap: 0.75rem;
+    height: 40px;
+    flex-shrink: 0;
+    margin: 0 -1rem;
+    padding: 0 1rem;
   }
 
-  .file-actions {
+  .titlebar.macos {
+    padding-left: calc(1rem + 72px);
+  }
+
+  .titlebar-drag {
+    flex: 1;
+    align-self: stretch;
+    min-width: 2rem;
+    --wails-draggable: drag;
+  }
+
+  .titlebar-actions {
     display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
     gap: 0.5rem;
-    flex-wrap: wrap;
+    margin-left: auto;
+    --wails-draggable: no-drag;
+  }
+
+  .titlebar button,
+  .titlebar input,
+  .titlebar label {
+    --wails-draggable: no-drag;
+  }
+
+  .video-name,
+  .status {
+    font-size: 0.85rem;
+    color: #a0aec0;
+    white-space: nowrap;
   }
 
   button,
@@ -351,13 +382,6 @@
     cursor: not-allowed;
   }
 
-  .meta {
-    display: flex;
-    gap: 1rem;
-    font-size: 0.85rem;
-    color: #a0aec0;
-  }
-
   .status {
     color: #68d391;
   }
diff --git a/frontend/src/lib/platform/wails.ts b/frontend/src/lib/platform/wails.ts
new file mode 100644
index 0000000..bce2a5d
--- /dev/null
+++ b/frontend/src/lib/platform/wails.ts
@@ -0,0 +1,10 @@
+import { System } from '@wailsio/runtime';
+
+/** True when running inside the Wails desktop shell on macOS. */
+export function isMacOS(): boolean {
+  try {
+    return System.IsMac();
+  } catch {
+    return false;
+  }
+}
diff --git a/main.go b/main.go
index 8672116..30c7cf9 100644
--- a/main.go
+++ b/main.go
@@ -44,7 +44,7 @@ func main() {
 		MinWidth:  960,
 		MinHeight: 600,
 		Mac: application.MacWindow{
-			InvisibleTitleBarHeight: 50,
+			InvisibleTitleBarHeight: 0,
 			Backdrop:                application.MacBackdropTranslucent,
 			TitleBar:                application.MacTitleBarHiddenInset,
 		},