From 9f955666166fb57fbae63f545ea0b557ab7f39d8 Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Sun, 15 Feb 2026 21:16:27 +0800
Subject: [PATCH] fix(desktop): make login and onboarding windows draggable on
 macOS

Login page: replace full-container drag region with a dedicated header
bar, matching the pattern used across the app. The previous approach
applied -webkit-app-region: drag to the entire content container which
could interfere with child element interactions.

Onboarding steps 1-4: move drag region from a tiny 80px left strip to
the entire header element, and mark the ModeToggle as no-drag so it
remains clickable.

Closes MUL-241

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/desktop/src/renderer/src/pages/login.tsx | 73 ++++++++++---------
 .../renderer/src/pages/onboarding/index.tsx   | 17 +++--
 2 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/apps/desktop/src/renderer/src/pages/login.tsx b/apps/desktop/src/renderer/src/pages/login.tsx
index ca13663a..0ba8740b 100644
--- a/apps/desktop/src/renderer/src/pages/login.tsx
+++ b/apps/desktop/src/renderer/src/pages/login.tsx
@@ -23,46 +23,51 @@ export default function LoginPage() {
 
   if (isLoading) {
     return (
-      <div
-        className="flex h-screen items-center justify-center bg-background"
-        style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
-      >
-        <Loading className="size-6" />
+      <div className="flex h-screen flex-col bg-background">
+        <header
+          className="shrink-0 h-12"
+          style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
+        />
+        <div className="flex flex-1 items-center justify-center">
+          <Loading className="size-6" />
+        </div>
       </div>
     )
   }
 
   return (
-    <div
-      className="flex h-screen flex-col items-center justify-center bg-background p-8 animate-in fade-in duration-300"
-      style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
-    >
-      <div className="w-full max-w-sm flex flex-col items-center text-center space-y-6">
-        {/* Brand */}
-        <div className="flex items-center gap-2">
-          <MulticaIcon bordered animate size="md" />
-          <h1 className="text-lg tracking-wide font-brand">Multica</h1>
+    <div className="flex h-screen flex-col bg-background">
+      <header
+        className="shrink-0 h-12"
+        style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
+      />
+      <div className="flex flex-1 flex-col items-center justify-center p-8 animate-in fade-in duration-300">
+        <div className="w-full max-w-sm flex flex-col items-center text-center space-y-6">
+          {/* Brand */}
+          <div className="flex items-center gap-2">
+            <MulticaIcon bordered animate size="md" />
+            <h1 className="text-lg tracking-wide font-brand">Multica</h1>
+          </div>
+
+          {/* Tagline */}
+          <p className="text-sm text-muted-foreground leading-relaxed">
+            An AI assistant that gets things done.
+          </p>
+
+          {/* Sign In */}
+          <Button
+            onClick={startLogin}
+            size="lg"
+            className="px-8"
+          >
+            Sign In to Continue
+          </Button>
+
+          {/* Helper */}
+          <p className="text-xs text-muted-foreground/60">
+            Opens browser for authentication
+          </p>
         </div>
-
-        {/* Tagline */}
-        <p className="text-sm text-muted-foreground leading-relaxed">
-          An AI assistant that gets things done.
-        </p>
-
-        {/* Sign In */}
-        <Button
-          onClick={startLogin}
-          size="lg"
-          className="px-8"
-          style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
-        >
-          Sign In to Continue
-        </Button>
-
-        {/* Helper */}
-        <p className="text-xs text-muted-foreground/60">
-          Opens browser for authentication
-        </p>
       </div>
     </div>
   )
diff --git a/apps/desktop/src/renderer/src/pages/onboarding/index.tsx b/apps/desktop/src/renderer/src/pages/onboarding/index.tsx
index fb43dc69..5879dc21 100644
--- a/apps/desktop/src/renderer/src/pages/onboarding/index.tsx
+++ b/apps/desktop/src/renderer/src/pages/onboarding/index.tsx
@@ -44,12 +44,12 @@ export default function OnboardingPage() {
 
   return (
     <div className="h-dvh flex flex-col bg-background">
-      <header className="shrink-0 h-12 flex items-center pr-4">
-        {/* Left: Draggable area for traffic lights */}
-        <div
-          className="w-20 h-full shrink-0"
-          style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
-        />
+      <header
+        className="shrink-0 h-12 flex items-center pr-4"
+        style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
+      >
+        {/* Left: Traffic light spacing */}
+        <div className="w-20 h-full shrink-0" />
 
         {/* Brand */}
         <div className="flex items-center gap-2 shrink-0">
@@ -65,7 +65,10 @@ export default function OnboardingPage() {
         </div>
 
         {/* Right: Theme toggle */}
-        <div className="shrink-0">
+        <div
+          className="shrink-0"
+          style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
+        >
           <ModeToggle />
         </div>
       </header>