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

admin/src/ui/Checkbox.tsx

@@ -55,7 +55,8 @@ const styles = stylex.create({
 	/**
 	 * The whole label is the hit area, so it carries the 44px pointer-target
 	 * floor the dialog's Close button already sets, on both axes. The text is
-	 * 20px tall, and a one-word source name is narrower than 44px again.
+	 * 20px tall, and a one-word source name is narrower than 44px again. A
+	 * source name can also be one unbroken string wider than a phone's line.
 	 */
 	label: {
 		minHeight: 44,
@@ -65,6 +66,7 @@ const styles = stylex.create({
 		gap: "0.5rem",
 		fontSize: "0.875rem",
 		lineHeight: "1.25rem",
+		overflowWrap: "anywhere",
 	},
 	box: {
 		flexShrink: 0,

admin/src/ui/FactLine.tsx

@@ -0,0 +1,25 @@
+import { Fragment, type ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+
+const styles = stylex.create({
+	fact: {
+		display: "inline-block",
+	},
+});
+
+/**
+ * Short facts joined by " · ". A narrow line breaks after a separator, and a
+ * fact moves to the next line whole: "1" and "occurrence" on two lines read as
+ * two facts. Only a fact wider than the whole line breaks inside itself.
+ */
+export default function FactLine({ facts }: { facts: readonly ReactNode[] }) {
+	return facts.map((fact, index) => (
+		<Fragment key={index}>
+			{index > 0 && " "}
+			<span {...stylex.props(styles.fact)}>
+				{fact}
+				{index < facts.length - 1 && " ·"}
+			</span>
+		</Fragment>
+	));
+}

admin/src/ui/styles.ts

@@ -264,10 +264,21 @@ export const styles = stylex.create({
 		paddingInline: "0.75rem",
 		paddingBlock: "0.5rem",
 	},
-	/** Focusable: a table wider than a phone scrolls sideways, and a keyboard must be able to reach the scroll. */
+	/**
+	 * Focusable: a table whose data is wider than its compact form still
+	 * scrolls sideways, and a keyboard must be able to reach the scroll. It is
+	 * also the size container each table's compact form queries.
+	 *
+	 * Positioned, so it is the containing block of the `srOnly` labels in its
+	 * header cells. A scroll container clips only the absolutely positioned
+	 * boxes it contains; an unclipped label at the far end of a wide table
+	 * widens the whole document, and a phone then zooms the page out to fit it.
+	 */
 	tableWrap: {
+		position: "relative",
 		marginTop: "1rem",
 		overflowX: "auto",
+		containerType: "inline-size",
 	},
 	/**
 	 * Not a faithful port: `space-y-3` set sibling margins on a block container,