admin: tables fit a phone, their first cell carrying the hidden columns, and no positioned label widens the page

admin/src/features/configuration/ZonesTab.tsx

@@ -11,6 +11,7 @@ import type { ForwardZone, ForwardZoneInput } from "@/lib/types";
 import InlineError from "@/lib/InlineError";
 import ConfirmDialog from "@/ui/ConfirmDialog";
 import { useCrudForm } from "@/ui/useCrudForm";
+import { local, ZoneResolver } from "./localCells";
 import QueryPanel from "./QueryPanel";
 import { styles as shared } from "@/ui/styles";
 import { colors } from "@/ui/tokens.stylex";
@@ -200,7 +201,7 @@ export default function ZonesTab() {
 									<th scope="col" {...stylex.props(styles.headCell)}>
 										Zone
 									</th>
-									<th scope="col" {...stylex.props(styles.headCell)}>
+									<th scope="col" {...stylex.props(styles.headCell, local.wide)}>
 										Resolver
 									</th>
 									<th scope="col" {...stylex.props(styles.headCellLast)}>
@@ -230,8 +231,20 @@ export default function ZonesTab() {
 											</td>
 										) : (
 											<>
-												<td {...stylex.props(styles.cell, shared.mono)}>{zone.zone}</td>
-												<td {...stylex.props(styles.cell, shared.mono)}>{zone.resolver}</td>
+												<td {...stylex.props(styles.cell, shared.mono, local.unbroken)}>
+													{zone.zone}
+													<ZoneResolver zone={zone} />
+												</td>
+												<td
+													{...stylex.props(
+														styles.cell,
+														shared.mono,
+														local.unbroken,
+														local.wide,
+													)}
+												>
+													{zone.resolver}
+												</td>
 												<td {...stylex.props(styles.actionCell)}>
 													<button
 														type="button"