feat(admin): visual and UX polish across admin UI

admin/src/PlaytestDetailPage.tsx

@@ -1,9 +1,8 @@
-import { CopyOutlined } from '@ant-design/icons'
+import { ArrowLeftOutlined, CopyOutlined } from '@ant-design/icons'
 import { useAppUIContext } from '@accelbyte/sdk-extend-app-ui'
 import { useQueryClient } from '@tanstack/react-query'
 import {
   Alert,
-  Breadcrumb,
   Button,
   Card,
   Modal,
@@ -161,17 +160,17 @@ export function PlaytestDetailPage() {
   return (
     <>
     <div
-      style={{ margin: '-16px -16px 0 -16px', backgroundColor: '#fff', padding: '16px 24px 0' }}
+      style={{ margin: '-16px -16px 0 -16px', backgroundColor: '#fff', padding: '16px 24px 0', borderTop: '1px solid #f0f0f0' }}
       data-testid="playtest-detail-page"
     >
-      <Breadcrumb
-        style={{ marginBottom: 8 }}
-        items={[
-          { title: 'Extend App UI' },
-          { title: <a onClick={() => navigate('/')}>Playtest Hub</a> },
-          { title: playtest.title ?? playtest.slug ?? '—' }
-        ]}
-      />
+      <Button
+        type="link"
+        icon={<ArrowLeftOutlined />}
+        onClick={() => navigate('/')}
+        style={{ padding: 0, height: 'auto', marginBottom: 8 }}
+      >
+        Back to list
+      </Button>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 8 }}>
         <div>
           <Typography.Title level={2} style={{ margin: 0 }}>

admin/src/federated-element.test.tsx

@@ -166,9 +166,8 @@ async function openRowMenu() {
 }
 
 describe('PlaytestsListPage', () => {
-  it('renders Playtest Hub header and a Create Playtest button', () => {
+  it('renders a Create Playtest button', () => {
     renderAt('/')
-    expect(screen.getByRole('heading', { name: /playtest hub/i })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /create playtest/i })).toBeInTheDocument()
   })
 

admin/src/federated-element.tsx

@@ -492,9 +492,6 @@ function PlaytestsListPage() {
     <>
       {/* Full-width white header — negative margins counteract FederatedElement's padding: 16 */}
       <div style={{ margin: '-16px -16px 0 -16px', backgroundColor: '#fff', padding: '20px 24px 0' }}>
-        <Typography.Title level={2} style={{ margin: '0 0 2px' }}>
-          Playtest Hub
-        </Typography.Title>
         <Tabs
           activeKey={activeTab}
           onChange={key => setActiveTab(key as 'list' | 'config')}
@@ -1029,7 +1026,8 @@ function PlaytestCreatePage() {
   const createErrorMessage =
     createError && isSlugConflict(createError) ? SLUG_CONFLICT_MESSAGE : apiErrorMessage(createError ?? {}, 'Create failed')
 
-  const handleSubmit = (values: FormValues) => {
+  const handleSubmit = () => {
+    const values = form.getFieldsValue(true) as FormValues
     const isADT = values.distributionModel === DistributionModel.ADT
     createMutation.mutate({
       data: {
@@ -1068,19 +1066,13 @@ function PlaytestCreatePage() {
 
   return (
     <>
-      {/* Full-width white header — title only */}
-      <div style={{ margin: '-16px -16px 0 -16px', backgroundColor: '#fff', padding: '20px 24px' }}>
-        <Typography.Title level={2} style={{ margin: 0 }}>
-          Create New Playtest
-        </Typography.Title>
-      </div>
-
+      <div style={{ display: 'flex', flexDirection: 'column', minHeight: 'calc(100vh - 32px)' }}>
       <Form<FormValues>
         form={form}
         layout="vertical"
         onFinish={handleSubmit}
         scrollToFirstError={{ behavior: 'smooth', block: 'center' }}
-        style={{ marginTop: 16, paddingBottom: 80 }}
+        style={{ marginTop: 16, flex: 1 }}
         initialValues={{
           platforms: [],
           ndaRequired: false,
@@ -1232,10 +1224,9 @@ function PlaytestCreatePage() {
 
         <div
           style={{
-            position: 'fixed',
+            position: 'sticky',
             bottom: 0,
-            left: 0,
-            right: 0,
+            margin: '0 -16px -16px',
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
@@ -1265,6 +1256,7 @@ function PlaytestCreatePage() {
           </Space>
         </div>
       </Form>
+      </div>
       <LinkADTModal open={linkAdtOpen} onClose={() => setLinkAdtOpen(false)} />
     </>
   )

admin/src/tabs/DistributionTab.test.tsx

@@ -133,7 +133,7 @@ describe('ADTPanel (build health surfacing)', () => {
 
   it('surfaces a success alert when the build is OK', () => {
     renderTab({ ...ADT_PT, adtBuildStatus: 'OK', adtBuildCheckedAt: '2026-05-26T10:00:00Z' })
-    expect(screen.getByTestId('adt-build-health-alert')).toHaveTextContent(/available in ADT/i)
+    expect(screen.getByTestId('adt-build-health-alert')).toHaveTextContent(/available/i)
   })
 
   it('calls CheckADTBuild with the playtestId when Check build is clicked', async () => {

admin/src/tabs/DistributionTab.tsx

@@ -11,6 +11,7 @@ import {
   Statistic,
   Table,
   Tag,
+  Tooltip,
   Typography,
   Upload,
   message
@@ -205,19 +206,19 @@ function ADTPanel({ playtest }: { playtest: V1Playtest }) {
                     </>
                   )}
                 </Typography.Text>
+                <BuildHealthAlert playtest={playtest} />
               </div>
             </div>
-            <BuildHealthAlert playtest={playtest} />
             <Alert
-              type="success"
+              type="info"
               showIcon
-              icon={<CheckCircleFilled />}
-              message="Approved participants will receive a direct download link via Discord DM from the PlaytestHub bot."
+              description={
+                <ul style={{ margin: 0, paddingLeft: 20 }}>
+                  <li>Upon approval, participants automatically receive a direct download link via Discord DM from the PlaytestHub bot.</li>
+                  <li>Changing the build applies to future approvals and DM retries only — participants already approved retain the link they received.</li>
+                </ul>
+              }
             />
-            <Typography.Text type="secondary" style={{ fontSize: 13 }}>
-              Changing the build applies to future approvals and DM retries only — already-approved participants keep the
-              download already sent.
-            </Typography.Text>
           </Space>
         </Card>
       )}
@@ -259,13 +260,11 @@ function BuildHealthAlert({ playtest }: { playtest: V1Playtest }) {
   }
   if (status === 'OK') {
     return (
-      <Alert
-        type="success"
-        showIcon
-        icon={<CheckCircleFilled />}
-        data-testid="adt-build-health-alert"
-        message={`Build is available in ADT${suffix}.`}
-      />
+      <Tooltip title={checkedAt ? `Last checked: ${checkedAt}` : undefined}>
+        <Tag color="success" icon={<CheckCircleFilled />} data-testid="adt-build-health-alert" style={{ cursor: 'default' }}>
+          Available
+        </Tag>
+      </Tooltip>
     )
   }
   return null