fix(layout): 修復主頁大空白 + Metrics Strip 右側溢出
All checks were successful
CD Pipeline / build-and-deploy (push) Successful in 7m18s
E2E Health Check / e2e-health (push) Successful in 18s

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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
OG T
2026-04-02 23:58:48 +08:00
parent e93a50a4b4
commit 2253c1b74e
2 changed files with 14 additions and 6 deletions

View File

@@ -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 ─────────────────────────────────────────────────── */}

View File

@@ -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-6children 自行控制佈局(主頁用)
children
) : (
<div className="p-6">
{children}
</div>
)}
</main>
</div>
)