fix(platform): admin UI labels, narrow screens, and top bar spacing

platform/packages/api/src/admin/react/styles.css

@@ -78,6 +78,26 @@ body {
 .void-admin-content {
   width: 100%;
 }
+/* Columns size to their content and keep words whole, so wide tables scroll on narrow screens. */
+.void-admin-content th,
+.void-admin-content td {
+  max-width: none;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+/* Fields keep their width but fit narrow screens. */
+.void-admin-content .astryx-field {
+  max-width: 100%;
+}
+/* On wide screens, page tables line up with the content; cards keep their own edges. */
+@media (min-width: 701px) {
+  .void-admin-content {
+    --container-padding-inline-start: 0px;
+    --container-padding-inline-end: 0px;
+    --container-padding-block-start: 0px;
+    --container-padding-block-end: 0px;
+  }
+}
 
 /* Stack gaps own vertical rhythm, including headings and empty states. */
 .void-admin-stack,
@@ -154,6 +174,20 @@ body {
   align-items: flex-start;
   gap: var(--spacing-2);
 }
+/* On phones, the account button stacks above the menu button and can shrink. */
+.void-admin-shell .astryx-top-nav[data-mode='mobile-bar'] > :last-child {
+  flex-direction: column;
+  align-items: flex-end;
+  min-width: 0;
+}
+/* Room around the stacked brand, matching the phone top bar. */
+.void-admin-shell .astryx-top-nav:not([data-mode]) {
+  padding-block: var(--spacing-4);
+}
+.astryx-mobile-nav :has(> .void-admin-brand) {
+  height: auto;
+  padding-block: var(--spacing-4);
+}
 
 .void-admin-logo {
   display: block;
@@ -267,13 +301,10 @@ body {
 }
 
 .void-admin-team-table-scroll {
-  --container-padding-inline-start: 0px;
-  --container-padding-inline-end: 0px;
   --container-padding-block-start: 0px;
   --container-padding-block-end: 0px;
   min-width: 0;
   max-width: 100%;
-  overflow-x: auto;
 }
 .void-admin-team-email {
   display: block;
@@ -738,6 +769,13 @@ body {
 .void-admin-invitations-table td {
   white-space: nowrap;
 }
+.void-admin-detail-table th {
+  /* Side labels take only the width they need. */
+  width: 1%;
+}
+.void-admin-detail-table tr:last-child th {
+  border-bottom-width: 0;
+}
 .void-admin-pagination {
   display: flex;
   align-items: center;

platform/packages/api/src/admin/react/views/BuildDetailPage.tsx

@@ -23,7 +23,7 @@ export function BuildDetailPage({ path, platformName, username }: AdminPageProps
       <SectionStack>
         <h1>Build {build.id}</h1>
 
-        <Table>
+        <Table className="void-admin-detail-table">
           <TableBody>
             <TableRow>
               <TableHeaderCell>Status</TableHeaderCell>

platform/packages/api/src/admin/react/views/DeploymentDetailPage.tsx

@@ -63,7 +63,7 @@ export function DeploymentDetailPage({ path, platformName, username }: AdminPage
           </SectionStack>
         )}
 
-      <Table>
+      <Table className="void-admin-detail-table">
         <TableBody>
           <TableRow>
             <TableHeaderCell>ID</TableHeaderCell>

platform/packages/api/src/admin/react/views/ProjectDetailPage.tsx

@@ -18,6 +18,7 @@ import { formatDateTime } from './format.ts';
 import { Layout } from './Layout.tsx';
 import { ProjectOwnerTransferSection } from './ProjectOwnerTransferSection.tsx';
 import { ProjectTeamSection } from './ProjectTeamSection.tsx';
+import { ProjectUrlLink } from './ProjectUrlLink.tsx';
 import { ProjectZeroTrustSection } from './ProjectZeroTrustSection.tsx';
 import { SectionStack } from './SectionStack.tsx';
 export function ProjectDetailPage({ path, platformName, username }: AdminPageProps) {
@@ -47,7 +48,7 @@ export function ProjectDetailPage({ path, platformName, username }: AdminPagePro
       <SectionStack>
         <h1>{project.slug}</h1>
 
-        <Table>
+        <Table className="void-admin-detail-table">
           <TableBody>
             <TableRow>
               <TableHeaderCell>ID</TableHeaderCell>
@@ -60,9 +61,7 @@ export function ProjectDetailPage({ path, platformName, username }: AdminPagePro
             <TableRow>
               <TableHeaderCell>URL</TableHeaderCell>
               <TableCell>
-                <a href={deployUrl} target="_blank" rel="noopener noreferrer">
-                  {deployUrl}
-                </a>
+                <ProjectUrlLink url={deployUrl} />
               </TableCell>
             </TableRow>
             <TableRow>
@@ -71,14 +70,11 @@ export function ProjectDetailPage({ path, platformName, username }: AdminPagePro
                 {domains.length > 0 ? (
                   domains.map((d) => (
                     <span key={d.id}>
-                      <a href={`https://${d.hostname}`} target="_blank" rel="noopener noreferrer">
-                        {d.hostname}
-                      </a>{' '}
-                      ({d.status}){' '}
+                      <ProjectUrlLink url={`https://${d.hostname}`} /> ({d.status}){' '}
                     </span>
                   ))
                 ) : (
-                  <>None</>
+                  <>—</>
                 )}
               </TableCell>
             </TableRow>
@@ -101,7 +97,9 @@ export function ProjectDetailPage({ path, platformName, username }: AdminPagePro
             <TableRow>
               <TableHeaderCell>Email</TableHeaderCell>
               <TableCell>
-                <a href={`/admin/email/${project.id}`}>usage, limits, destinations</a>
+                <a className="void-admin-resource-link" href={`/admin/email/${project.id}`}>
+                  usage, limits, destinations
+                </a>
               </TableCell>
             </TableRow>
             <TableRow>

platform/packages/api/src/admin/react/views/UserDetailPage.tsx

@@ -38,7 +38,7 @@ export function UserDetailPage({ path, platformName, username }: AdminPageProps)
       <SectionStack>
         <h1>{user.login}</h1>
 
-        <Table>
+        <Table className="void-admin-detail-table">
           <TableBody>
             <TableRow>
               <TableHeaderCell>ID</TableHeaderCell>