admin: ui polish pass, thirty findings from the emil audit

selected states stop changing font weight, buttons gain a pressed scale and scoped 120ms transitions with a reduced-motion override, every loading and empty state reserves its height, charts measure before first paint, hit targets rise to the 44px enhanced target where layout permits, long domains clamp to two lines on an unpadded inner span, chips and name cells truncate, tabular figures on counts and time columns, a z-index layer scale replaces magic numbers and fixes the dialog-over-confirm tie, history's empty state gains a clear-filters action, page headings balance, font smoothing and color-scheme land on the html reset.

admin/src/features/activity/cells.tsx

@@ -25,6 +25,9 @@ import { colors } from "@/ui/tokens.stylex";
 
 const DARK = "@media (prefers-color-scheme: dark)";
 
+/** Wide enough for an ordinary hostname, narrow enough to leave the six other columns room. */
+const DOMAIN_MAX_WIDTH = "24rem";
+
 const styles = stylex.create({
 	head: {
 		backgroundColor: { default: "oklch(98.5% 0 none)", [DARK]: "oklch(21% 0.006 285.885)" },
@@ -46,6 +49,9 @@ const styles = stylex.create({
 	breakAll: {
 		wordBreak: "break-all",
 	},
+	domainCell: {
+		maxWidth: DOMAIN_MAX_WIDTH,
+	},
 	small: {
 		fontSize: "0.75rem",
 		lineHeight: "1rem",
@@ -53,10 +59,32 @@ const styles = stylex.create({
 	muted: {
 		color: colors.textMuted,
 	},
+	/**
+	 * The padding makes the whole row height clickable, and the equal negative
+	 * margin gives that height back to the row. The clamp lives on the inner
+	 * span, not here: a padded `-webkit-box` can paint a third clipped line
+	 * inside its own padding.
+	 */
 	domainLink: {
+		display: "block",
+		maxWidth: DOMAIN_MAX_WIDTH,
+		paddingBlock: "0.5rem",
+		marginBlock: "-0.5rem",
 		color: colors.primaryOnSurface,
 		textDecorationLine: "none",
 	},
+	/**
+	 * A domain is unbounded; the column is not. The clamp counts only the lines
+	 * of the element that directly holds the text, so every cell wraps its text
+	 * in this span — a `td` that took `display: -webkit-box` would stop being a
+	 * table cell.
+	 */
+	domainClamp: {
+		display: "-webkit-box",
+		WebkitBoxOrient: "vertical",
+		WebkitLineClamp: 2,
+		overflow: "hidden",
+	},
 	/**
 	 * The badge shape and its weight are the signal; the tint only says which
 	 * kind of unhappy answer this was. A monochrome or colour-blind reading of
@@ -136,8 +164,11 @@ export function ActivityCells({
 	return (
 		<>
 			<td {...stylex.props(styles.cell, styles.nowrap, styles.muted)}>{formatTime(row.ts)}</td>
-			<td {...stylex.props(styles.cell, styles.small, styles.breakAll, shared.mono)}>
-				{renderDomain(row.id, row.domain)}
+			<td
+				title={row.domain}
+				{...stylex.props(styles.cell, styles.small, styles.breakAll, styles.domainCell, shared.mono)}
+			>
+				{renderDomain(row.id, <span {...stylex.props(styles.domainClamp)}>{row.domain}</span>)}
 			</td>
 			<td {...stylex.props(styles.cell, styles.small, styles.nowrap)}>
 				<ClientName ip={row.client_ip} names={clientNames} />