marketing-shibata50/multica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(desktop): make login and onboarding windows draggable on macOS

Browse source 
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>
This commit is contained in:
Jiayuan Zhang 2026-02-15 21:16:27 +08:00
parent 74c0ca0ddc
commit 9f95566616
2 changed files with 49 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

73
apps/desktop/src/renderer/src/pages/login.tsx
View file

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

17
apps/desktop/src/renderer/src/pages/onboarding/index.tsx
View file

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