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

admin/src/features/diagnostics/HealthStrip.tsx

@@ -38,11 +38,11 @@ const styles = stylex.create({
 		gap: "0.5rem",
 		// Five is prime, so every count between one and five leaves a short last
 		// row; three columns made it 3 then 2, which reads as a layout that ran out
-		// of room rather than one that chose. So the strip goes from one column
-		// straight to two and then to a single row of five, and is never ragged.
+		// of room rather than one that chose. Two columns, then a single row of
+		// five. One column on a phone stacked five cards over the episodes the
+		// page exists to show.
 		gridTemplateColumns: {
-			default: "minmax(0, 1fr)",
-			"@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",
+			default: "repeat(2, minmax(0, 1fr))",
 			"@media (min-width: 1100px)": "repeat(5, minmax(0, 1fr))",
 		},
 		listStyleType: "none",
@@ -51,6 +51,8 @@ const styles = stylex.create({
 	fact: {
 		display: "flex",
 		flexWrap: "wrap",
+		// A card stretches to the tallest card in its row; the lines stay at the top.
+		alignContent: "flex-start",
 		alignItems: "baseline",
 		gap: "0.375rem",
 		borderRadius: metrics.radius,
@@ -73,8 +75,10 @@ const styles = stylex.create({
 	label: {
 		color: colors.textSecondary,
 	},
+	/** Below 640px a value always starts its own line, so every card has the same shape. */
 	value: {
 		fontWeight: 500,
+		flexBasis: { default: null, "@media (max-width: 639px)": "100%" },
 	},
 	detail: {
 		flexBasis: "100%",