monorepo-sdc-text-bug

Background

SDC Focus page HTML rendering bug, where the SDC brand text entity component sometimes splits the $ (in $MART DEBT) onto a separate line instead of keeping “$MART” together always.
See Android screenshot c:\Users\Admin\My Drive\tmp\SDC-entity-render-bug.jpg
This bug has been fixed before, many months ago.

Tasks

Fix this HTML rendering issue to always keep the dollar sign in the SmartDebt brand text entity together as a single word, always. Might be fastest to extract solution from Git. Probably over 12 months ago.
Explain why this rendering bug resurfaced.
First reproduce the issue, so can definitively confirm impact of solution.

Success Criteria

Can reproduce the rendering bug.
Confirmed that your solution solves the problem.
Clear explanation of why this bug resurfaced.

Context

SSOT: [repo path] — see AGENTS.md for full project context. Portal: monorepo

Claude Response — 2026-09-03 (thread migrated from `web-testing-system.md`)

This bug was worked across rounds 2–3 of Core/IT/Tasks/web-testing-system.md (2026-08-26), because the two tasks were started from one session. The dialogue is summarised here; the full original transcript is preserved at Core/IT/Tasks/archive/web-testing-system.2026-09-03.pre-prep.md.

Summary:

Reproduced — rebuilt sites/sdc, served the static output, swept viewport widths 300–800px in headless Chromium via Playwright. $ split confirmed at 320px, 390px and 412px. Not Android-specific — a plain responsive word-wrap bug, reproducible in desktop Chrome by narrowing the window.
Root cause — .smart-debt in sites/sdc/src/pages/focus.astro was missing white-space: nowrap. The Template site’s SmartDebt.astro (a separate, correct implementation of the same S↔$ letter-swap pattern) already carried that rule; focus.astro reimplements the pattern inline and dropped it.
Why it resurfaced — the fix never lived in one place. Two independent implementations of the same brand-text component exist (shared SmartDebt.astro component vs. inline CSS in focus.astro); fixing one never fixed the other. Classic SSOT violation, not a regression of the original fix.
Fixed + proven — white-space: nowrap added to .smart-debt, commit cfafd82. Re-swept 300–800px: zero splits. Reverted the fix and re-ran to confirm the test fails without it — a real regression guard, not a tautology.
Regression coverage added — sites/sdc/playwright.config.ts + sites/sdc/tests/focus.spec.ts (9 cases, one per width). Before this, sites/sdc had no test infrastructure of any kind, which is why nothing caught the bug.
A wrong first fix is on the record — round 2 applied display: inline-block to .original-s by analogy to a previously-fixed .ft tooltip bug, without reproducing. It did nothing for this bug (left in place, harmless). Lesson promoted to LESSONS.md: reproduce before fixing, even when a prior fix in the same file looks like an obvious pattern match.
Confirmed live by Talbot (round 3 reply) — rendering verified fixed on the deployed SDC Focus page in local browser, on Cloudflare, and on his Android phone.

Follow-up carried elsewhere, not here:

The two-implementations SSOT problem (focus.astro reimplementing SmartDebt.astro) — not consolidated. Logged in the monorepo’s UPGRADES.md scope, not this task.
The testing-system gaps this bug exposed — Core/IT/Tasks/web-testing-system.md.

Next Steps for Talbot:

None — bug fixed, confirmed live by you, regression-tested. Closing.