From e69c1bd8aa6c4302c3e571edfc2bc0b201e710c5 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 2 Jan 2026 22:35:33 +0800
Subject: [PATCH] fix(ui): align FullScreenPanel header with App.tsx layout

- Use same DRAG_BAR_HEIGHT (28px) and HEADER_HEIGHT (64px) as App.tsx
- Remove border-b divider line from header
- Add rounded-lg class to back button for consistency
---
 src/components/common/FullScreenPanel.tsx | 25 ++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/common/FullScreenPanel.tsx b/src/components/common/FullScreenPanel.tsx
index c5f79b879..a0a757361 100644
--- a/src/components/common/FullScreenPanel.tsx
+++ b/src/components/common/FullScreenPanel.tsx
@@ -12,6 +12,9 @@ interface FullScreenPanelProps {
   footer?: React.ReactNode;
 }
 
+const DRAG_BAR_HEIGHT = 28; // px - match App.tsx
+const HEADER_HEIGHT = 64; // px - match App.tsx
+
 /**
  * Reusable full-screen panel component
  * Handles portal rendering, header with back button, and footer
@@ -44,18 +47,30 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
           className="fixed inset-0 z-[60] flex flex-col"
           style={{ backgroundColor: "hsl(var(--background))" }}
         >
-          {/* Header */}
+          {/* Drag region - match App.tsx */}
           <div
-            className="flex-shrink-0 py-3 border-b border-border-default"
-            style={{ backgroundColor: "hsl(var(--background))" }}
+            data-tauri-drag-region
+            style={{
+              WebkitAppRegion: "drag",
+              height: DRAG_BAR_HEIGHT,
+            } as React.CSSProperties}
+          />
+
+          {/* Header - match App.tsx */}
+          <div
+            className="flex-shrink-0 flex items-center"
+            style={{
+              backgroundColor: "hsl(var(--background))",
+              height: HEADER_HEIGHT,
+            }}
           >
-            <div className="h-4 w-full" data-tauri-drag-region />
-            <div className="mx-auto max-w-[56rem] px-6 flex items-center gap-4">
+            <div className="mx-auto max-w-[56rem] px-6 w-full flex items-center gap-4">
               <Button
                 type="button"
                 variant="outline"
                 size="icon"
                 onClick={onClose}
+                className="rounded-lg"
               >
                 <ArrowLeft className="h-4 w-4" />
               </Button>