From 996c412cf8474798e610e43a1d7d48dfe426bec2 Mon Sep 17 00:00:00 2001
From: wahyuwidharto <wahyu.dwi.widharto@gmail.com>
Date: Tue, 14 Jul 2026 08:11:08 +0700
Subject: [PATCH] fix(admin): flatten detail-page header + hug ADT Available
 badge

- Playtest detail page rendered its own white header band (bleed + border)
  with an H2 title, which stacked as a second header bar under the AGS
  Admin Portal chrome. Drop the band and shrink the title to H3 so it reads
  as a page heading on the app canvas, not a competing header.
- The ADT "Available" build-health tag stretched full width because it sat
  in a flex-column (align-items: stretch). Add align-self: flex-start so it
  hugs its text.
---
 admin/src/PlaytestDetailPage.test.tsx | 2 +-
 admin/src/PlaytestDetailPage.tsx      | 4 ++--
 admin/src/tabs/DistributionTab.tsx    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/admin/src/PlaytestDetailPage.test.tsx b/admin/src/PlaytestDetailPage.test.tsx
index 8189421..8acec80 100644
--- a/admin/src/PlaytestDetailPage.test.tsx
+++ b/admin/src/PlaytestDetailPage.test.tsx
@@ -148,7 +148,7 @@ beforeEach(() => {
 describe('PlaytestDetailPage shell', () => {
   it('renders header + status pill + breadcrumb', () => {
     renderDetail('autumn-draft')
-    expect(screen.getByRole('heading', { name: 'Autumn Build', level: 2 })).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'Autumn Build', level: 3 })).toBeInTheDocument()
     const pill = screen.getByTestId('playtest-status-pill')
     expect(within(pill).getByText('Draft')).toBeInTheDocument()
   })
diff --git a/admin/src/PlaytestDetailPage.tsx b/admin/src/PlaytestDetailPage.tsx
index cbd1340..f32463c 100644
--- a/admin/src/PlaytestDetailPage.tsx
+++ b/admin/src/PlaytestDetailPage.tsx
@@ -160,7 +160,7 @@ export function PlaytestDetailPage() {
   return (
     <>
     <div
-      style={{ margin: '-16px -16px 0 -16px', backgroundColor: '#fff', padding: '16px 24px 0', borderTop: '1px solid #f0f0f0' }}
+      style={{ marginBottom: 8 }}
       data-testid="playtest-detail-page"
     >
       <Button
@@ -173,7 +173,7 @@ export function PlaytestDetailPage() {
       </Button>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 8 }}>
         <div>
-          <Typography.Title level={2} style={{ margin: 0 }}>
+          <Typography.Title level={3} style={{ margin: 0 }}>
             {playtest.title ?? '—'}
           </Typography.Title>
           <Space size={12} style={{ marginTop: 4 }}>
diff --git a/admin/src/tabs/DistributionTab.tsx b/admin/src/tabs/DistributionTab.tsx
index d5badf9..59309e3 100644
--- a/admin/src/tabs/DistributionTab.tsx
+++ b/admin/src/tabs/DistributionTab.tsx
@@ -261,7 +261,7 @@ function BuildHealthAlert({ playtest }: { playtest: V1Playtest }) {
   if (status === 'OK') {
     return (
       <Tooltip title={checkedAt ? `Last checked: ${checkedAt}` : undefined}>
-        <Tag color="success" icon={<CheckCircleFilled />} data-testid="adt-build-health-alert" style={{ cursor: 'default' }}>
+        <Tag color="success" icon={<CheckCircleFilled />} data-testid="adt-build-health-alert" style={{ cursor: 'default', alignSelf: 'flex-start' }}>
           Available
         </Tag>
       </Tooltip>