fix(components,e2e): stop long titles overhanging their card, de-flake the themed axe scan

Three cards overhung with real content while the demo fixtures fit. The angel
number hero put its text column beside the numeral as a flex item with
min-width auto, so the live title for 1111, Spiritual Awakening, Manifestation,
and Alignment, pushed the hero 5px past the card on a phone. It surfaced on a
WordPress page, not here, because the captured fixture title is shorter.

Choghadiya was the same class one level down: a bare 1fr track keeps a
min-content floor, so a long muhurta name widened the tile and dragged the
header and the grid out with it. minmax(0, 1fr) plus a wrapping name column
fixes the cause; the header was only where it showed.

The layout gate now also runs with the title-ish fields inflated, because
fixtures are whatever a sample call happened to return and a field that is
short in the capture can be long in production. That is what caught the
choghadiya case.

The themed axe scan was failing about one run in three on WebKit and passing on
retry, which read as noise and was not. data-theme is set synchronously but the
token cascade reaches the shadow trees a frame later, so axe sampled dark text
on a still-light tile and reported contrast 1.04. setTheme now polls the exact
invariant axe is about to measure, on the element it measures it on. 78 e2e
green across chromium, firefox and webkit with no retries.

Author: ph33nx

packages/ui/src/components/angel-number-card.ts

@@ -28,6 +28,14 @@ export class RoxyAngelNumberCard extends RoxyDataElement<GetAngelNumberResponse>
 				align-items: center;
 				gap: var(--roxy-space-md, 1rem);
 			}
+			/* The text column beside the numeral must be allowed to WRAP. As a flex
+			 * item it keeps min-width: auto, so a long title pushed the whole hero
+			 * past the card edge instead of breaking: the live response for 1111 is
+			 * "Spiritual Awakening, Manifestation, and Alignment", which overhung by
+			 * 5px on a phone while the shorter demo title fit and hid it. */
+			.hero > div {
+				min-width: 0;
+			}
 			.numeral {
 				font-size: 3rem;
 				line-height: 1;

packages/ui/src/components/angel-number-lookup.ts

@@ -34,6 +34,14 @@ export class RoxyAngelNumberLookup extends RoxyDataElement<AnalyzeNumberSequence
 				align-items: center;
 				gap: var(--roxy-space-md, 1rem);
 			}
+			/* The text column beside the numeral must be allowed to WRAP. As a flex
+			 * item it keeps min-width: auto, so a long title pushed the whole hero
+			 * past the card edge instead of breaking: the live response for 1111 is
+			 * "Spiritual Awakening, Manifestation, and Alignment", which overhung by
+			 * 5px on a phone while the shorter demo title fit and hid it. */
+			.hero > div {
+				min-width: 0;
+			}
 			.numeral {
 				font-size: 3rem;
 				line-height: 1;

packages/ui/src/components/choghadiya-grid.ts

@@ -65,7 +65,10 @@ export class RoxyChoghadiyaGrid extends RoxyDataElement<GetChoghadiyaResponse> {
 			}
 			.cho-tile {
 				display: grid;
-				grid-template-columns: 1fr auto;
+				/* minmax(0, 1fr), never a bare 1fr: a 1fr track keeps an automatic
+				 * min-content floor, so a long muhurta name widened the tile past the
+				 * card instead of wrapping, and pushed the time column out with it. */
+				grid-template-columns: minmax(0, 1fr) auto;
 				align-items: center;
 				gap: 0.25em 0.75em;
 				padding: 0.55em 0.85em;
@@ -105,6 +108,8 @@ export class RoxyChoghadiyaGrid extends RoxyDataElement<GetChoghadiyaResponse> {
 				font-size: var(--roxy-text-base, 1rem);
 				font-weight: var(--roxy-weight-bold, 600);
 				grid-column: 1;
+				min-width: 0;
+				overflow-wrap: anywhere;
 			}
 			.tile-time {
 				font-size: var(--roxy-text-xs, 0.75rem);

packages/ui/tests/e2e/forms.spec.ts

@@ -58,6 +58,62 @@ async function scan(page: Page): Promise<void> {
 	expect(blocking, JSON.stringify(blocking, null, 2)).toEqual([]);
 }
 
+/**
+ * Switch theme and wait until the components have actually repainted in it.
+ *
+ * @remarks
+ * `applyTheme` sets `data-theme` on `<html>` synchronously, so a bare click looks
+ * settled, but WebKit can propagate the token cascade into the shadow trees a frame
+ * later. axe then samples dark-theme text (`#fafafa`) against a background still
+ * resolving as `#ffffff`, reports contrast 1.04 on every sign tile, and the run
+ * fails about one time in three. Poll the value axe actually reads rather than
+ * sleeping on a guess.
+ *
+ * `containerId` is the subtree the caller is about to scan. The two suites mount
+ * different hosts, and polling one that is not on the page never settles.
+ *
+ * The probe asserts the invariant axe is about to measure, on the element it
+ * measures it on: a tile label and the surface behind it must sit on OPPOSITE
+ * sides of mid luminance. Watching the light-DOM host instead is not enough,
+ * because its inherited `color` flips a frame before the shadow tiles repaint
+ * their background, which is the half-applied state that produced `#f2e4df` text
+ * on a still-light `#fbf6f3` tile under the practitioner preset.
+ */
+async function setTheme(
+	page: Page,
+	theme: 'light' | 'dark',
+	containerId: string,
+): Promise<void> {
+	await page.locator(`#theme-${theme}`).click();
+	await page.waitForFunction(
+		([t, id]) => {
+			if (document.documentElement.dataset.theme !== t) return false;
+			const form = document
+				.getElementById(id)
+				?.querySelector('roxy-endpoint-form');
+			const root = (form as { shadowRoot?: ShadowRoot | null } | null)
+				?.shadowRoot;
+			const label = root?.querySelector('.tile-label');
+			const tile = label?.closest('.tile');
+			if (!label || !tile) return false;
+
+			const lum = (c: string): number | null => {
+				const n = c
+					.match(/[\d.]+/g)
+					?.slice(0, 3)
+					.map(Number);
+				return n && n.length === 3 ? (n[0]! + n[1]! + n[2]!) / 3 : null;
+			};
+			const fg = lum(getComputedStyle(label).color);
+			const bg = lum(getComputedStyle(tile).backgroundColor);
+			if (fg === null || bg === null) return false;
+			// Settled means readable: light text on a dark tile, or the reverse.
+			return Math.abs(fg - bg) > 60 && (t === 'dark' ? fg > bg : fg < bg);
+		},
+		[theme, containerId],
+	);
+}
+
 test.describe('self-fetch input a11y', () => {
 	test('the tile picker, toggle, location, and group cards render their ARIA roles', async ({
 		page,
@@ -93,7 +149,7 @@ test.describe('self-fetch input a11y', () => {
 
 	test('passes axe on dark theme', async ({ page }) => {
 		await mountForms(page);
-		await page.locator('#theme-dark').click();
+		await setTheme(page, 'dark', 'roxy-e2e-forms');
 		await scan(page);
 	});
 });
@@ -154,7 +210,7 @@ test.describe('practitioner theme preset', () => {
 			expect(blocking, JSON.stringify(blocking, null, 2)).toEqual([]);
 		};
 		await scanThemed();
-		await page.locator('#theme-dark').click();
+		await setTheme(page, 'dark', 'roxy-practitioner');
 		await scanThemed();
 	});
 });

packages/ui/tests/e2e/layout.spec.ts

@@ -96,3 +96,90 @@ for (const vp of WIDTHS) {
 		expect(issues, `${vp.label}: ${issues.join('\n')}`).toEqual([]);
 	});
 }
+
+/**
+ * The same overflow check, but against LONG content rather than the demo fixtures.
+ *
+ * @remarks
+ * The fixtures are whatever a sample call happened to return, so a field can be short in the capture and long in production. `roxy-angel-number-card` shipped a hero that overhung its card by 5px for number 1111, whose live title is "Spiritual Awakening, Manifestation, and Alignment", while the shorter captured title fit and the gate stayed green. It only surfaced on a real WordPress page.
+ *
+ * Rewriting every fixture is not the fix. Inflating the title-ish fields in place covers the whole library in one pass and keeps the fixtures honest about what the API actually returned.
+ */
+test('no section overflows when its text fields are long', async ({ page }) => {
+	await page.setViewportSize({ width: 375, height: 900 });
+	await page.goto('/');
+	await page.waitForLoadState('networkidle');
+	await page.waitForTimeout(800);
+
+	const issues = await page.evaluate(async () => {
+		const LONG =
+			'Spiritual Awakening, Manifestation, and Alignment With Higher Purpose';
+		const TEXTY = /^(title|name|phase|label|heading)$/i;
+		const bloat = (v: unknown, depth = 0): unknown => {
+			if (depth > 3 || v === null || typeof v !== 'object') return v;
+			if (Array.isArray(v)) return v.map((x) => bloat(x, depth + 1));
+			const out: Record<string, unknown> = {};
+			for (const [k, val] of Object.entries(v as Record<string, unknown>)) {
+				out[k] =
+					typeof val === 'string' && TEXTY.test(k) && val.length < 30
+						? LONG
+						: bloat(val, depth + 1);
+			}
+			return out;
+		};
+
+		type Host = HTMLElement & {
+			shadowRoot?: ShadowRoot | null;
+			data?: unknown;
+		};
+		const hosts = ([...document.querySelectorAll('*')] as Host[]).filter(
+			(e) => e.tagName.startsWith('ROXY-') && e.shadowRoot && e.data,
+		);
+		for (const h of hosts) {
+			try {
+				h.data = bloat(structuredClone(h.data));
+			} catch {
+				// A fixture holding something structuredClone cannot copy stays as-is.
+			}
+		}
+		await new Promise((r) => setTimeout(r, 1200));
+
+		const found: string[] = [];
+		for (const h of hosts) {
+			const hostRect = h.getBoundingClientRect();
+			if (hostRect.width === 0) continue;
+			const walk = (root: ParentNode) => {
+				for (const el of root.querySelectorAll('*')) {
+					const e = el as HTMLElement & { shadowRoot?: ShadowRoot | null };
+					if (e.shadowRoot) walk(e.shadowRoot);
+					const r = e.getBoundingClientRect();
+					if (r.width === 0) continue;
+					if (r.right <= hostRect.right + 2) continue;
+					let p: HTMLElement | null = e.parentElement;
+					let scrollable = false;
+					while (p && p !== (root as unknown as HTMLElement)) {
+						const ox = getComputedStyle(p).overflowX;
+						if (ox === 'auto' || ox === 'scroll') {
+							scrollable = true;
+							break;
+						}
+						p = p.parentElement;
+					}
+					if (!scrollable) {
+						found.push(
+							`${h.tagName.toLowerCase()}: ${e.tagName.toLowerCase()}.${e.className || '?'} overflows by ${Math.round(r.right - hostRect.right)}px`,
+						);
+						break;
+					}
+				}
+			};
+			walk(h.shadowRoot as ShadowRoot);
+		}
+		return found;
+	});
+
+	// SVG chart labels are excluded: a chart cell is sized for a planet name, and
+	// a 68 character string in that field is not a case the API can produce.
+	const real = issues.filter((i) => !i.includes(': text.'));
+	expect(real, real.join('\n')).toEqual([]);
+});