[andrewforester]

Summary

On a phone with a larger system text size the site stayed at the default size. Now it follows the system setting, and pages stay usable at large sizes.

• System text size. On iPhone and iPad, followSystemTextSize (src/core/ui/textSize.ts) reads the Dynamic Type body size and scales the root font. The default size gives 100%, so nothing changes for most readers. Desktops are skipped, since there the system body font is a fixed 13px. On Android, <meta name="text-scale" content="scale"> lets Chrome apply the OS text scale.
• Scene labels use rem, so they grow with the text. Label placement already measures each label, so it adapts.
• No horizontal scroll at large sizes. Long words wrap. The masthead row, slider headers, slider scales, readout rows, chips and prose lists wrap or shrink instead of widening the page. The "more explainers" cards and the about steps were the worst cases, mostly in Ukrainian and German.
• Chips grow with wrapped text. On touch screens the explainers gave chips a fixed height: 44px, so a label that wrapped to two lines spilled out of the chip. It is now min-height: 44px in all 16 explainers. Multi-line chips read from the start, with tighter line spacing.

At the default text size the layout is unchanged on desktop and on mobile.

Canvas charts keep their current text size. Scaling them pushed /uk/naval-drone/ over the JavaScript budget, which it already sits at, so that is left for later.

Tests

• New e2e/largeText.spec.ts: on the phone project at a 235% root font, every page (catalogue, about, every explainer) in English, German and Ukrainian must not scroll sideways, and no button text may be taller than its button. On the styles from before this change it fails on every page. With this change all 63 pass.
• npm run lint, npm test, npm run build and the smoke and large text e2e suites pass.

🤖 Generated with Claude Code

[veelenga]

Please confirm this is ready to merge.

[andrewforester]

Checked and fixed on the Tesla Roadster as well. It's ready to merge.