From 2253c1b74ea7880c0d543b1d5269265e33433765 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Thu, 2 Apr 2026 23:58:48 +0800
Subject: [PATCH] =?UTF-8?q?fix(layout):=20=E4=BF=AE=E5=BE=A9=E4=B8=BB?=
 =?UTF-8?q?=E9=A0=81=E5=A4=A7=E7=A9=BA=E7=99=BD=20+=20Metrics=20Strip=20?=
 =?UTF-8?q?=E5=8F=B3=E5=81=B4=E6=BA=A2=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 AppLayout fullBleed prop，主頁 opt-out p-6 包裝，
移除 page.tsx 的 margin: '-24px' hack。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/page.tsx            |  4 ++--
 apps/web/src/components/layout/app-layout.tsx | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx
index 14aca2f6..e19c119c 100644
--- a/apps/web/src/app/[locale]/page.tsx
+++ b/apps/web/src/app/[locale]/page.tsx
@@ -175,7 +175,8 @@ export default function Home({ params }: { params: { locale: string } }) {
   ]
 
   return (
-    <AppLayout locale={locale} showBackground={false}>
+    <AppLayout locale={locale} showBackground={false} fullBleed>
+      {/* fullBleed: AppLayout 不加 p-6，直接填滿 header 以下空間 */}
       <div style={{
         display: 'flex',
         flexDirection: 'column',
@@ -183,7 +184,6 @@ export default function Home({ params }: { params: { locale: string } }) {
         background: '#f5f4ed',
         fontFamily: 'var(--font-body), monospace',
         overflow: 'hidden',
-        margin: '-24px',
       }}>
 
         {/* ── Metrics Strip ─────────────────────────────────────────────────── */}
diff --git a/apps/web/src/components/layout/app-layout.tsx b/apps/web/src/components/layout/app-layout.tsx
index 1e44e787..c31fde9d 100644
--- a/apps/web/src/components/layout/app-layout.tsx
+++ b/apps/web/src/components/layout/app-layout.tsx
@@ -29,6 +29,8 @@ interface AppLayoutProps {
   locale: string
   children: React.ReactNode
   showBackground?: boolean
+  /** 主頁用：移除 pt-16 + p-6，讓 children 自行控制佈局 */
+  fullBleed?: boolean
 }
 
 // =============================================================================
@@ -45,6 +47,7 @@ export function AppLayout({
   locale,
   children,
   showBackground = true,
+  fullBleed = false,
 }: AppLayoutProps) {
   const [collapsed, setCollapsed] = useState(false)
   const [mounted, setMounted] = useState(false)
@@ -128,14 +131,19 @@ export function AppLayout({
       <main
         className={cn(
           'relative z-10',
-          'pt-16', // Header height
+          'pt-16', // Header height (64px)
           'transition-all duration-300 ease-out',
           collapsed ? 'ml-16' : 'ml-64'
         )}
       >
-        <div className="p-6">
-          {children}
-        </div>
+        {fullBleed ? (
+          // fullBleed: 無 p-6，children 自行控制佈局（主頁用）
+          children
+        ) : (
+          <div className="p-6">
+            {children}
+          </div>
+        )}
       </main>
     </div>
   )