From 1e5174582b842f6d24fa72019b2bba7203161fbd Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Sun, 15 Feb 2026 22:05:03 +0800
Subject: [PATCH] fix(desktop): center onboarding step indicator using absolute
 positioning

Use absolute positioning for the step indicator to achieve true centering
regardless of left/right element widths. This is the standard approach for
header layouts where the center element must be centered relative to the
entire container width, not the remaining flex space.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../renderer/src/pages/onboarding/index.tsx    | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/apps/desktop/src/renderer/src/pages/onboarding/index.tsx b/apps/desktop/src/renderer/src/pages/onboarding/index.tsx
index 5879dc21..1feb1dbe 100644
--- a/apps/desktop/src/renderer/src/pages/onboarding/index.tsx
+++ b/apps/desktop/src/renderer/src/pages/onboarding/index.tsx
@@ -45,30 +45,24 @@ 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"
+        className="relative shrink-0 h-12 flex items-center justify-between px-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">
+        {/* Left: Brand */}
+        <div className="flex items-center gap-2 pl-16">
           <MulticaIcon bordered noSpin />
           <span className="text-sm tracking-wide font-brand">Multica</span>
         </div>
 
-        {/* Center: Step indicator */}
-        <div className="flex-1 flex justify-center">
+        {/* Center: Step indicator (absolute for true centering) */}
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
           <span className="text-sm text-muted-foreground">
             {stepLabel} ({currentStep}/{totalSteps})
           </span>
         </div>
 
         {/* Right: Theme toggle */}
-        <div
-          className="shrink-0"
-          style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
-        >
+        <div style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}>
           <ModeToggle />
         </div>
       </header>