Text scaling (200% zoom): avoid clipped UI

Try the micro-demo: text-scaling-demo.html

The demo simulates 100%/150%/200% text size. Also test real browser zoom (Ctrl++) or your game’s UI scale setting.

What goes wrong

• Clipped buttons: fixed-height buttons cut off bigger text.
• Overlapping labels: rows assume one line, then collide at larger sizes.
• Hidden help text: containers with overflow:hidden quietly hide instructions.
• “I can’t reach it” controls: important UI is below the fold, but the panel can’t scroll.

Small, reliable pattern

1. Remove fixed heights from text containers and buttons. Prefer min-height and padding.
2. Allow wrapping: use flex-wrap and avoid white-space:nowrap on labels/help text.
3. Fix flex truncation: add min-width:0 to flexible children so long names can wrap.
4. Prefer scroll over clipping: if a panel must be bounded, use overflow:auto (not hidden).
5. Test at 200%: pick one “dense” screen (settings/profile/inventory) and make it your regression check.

Why it matters (games + web)

• Players use UI scale for distance, glare, low vision, or fatigue.
• Bigger text is also common on handhelds and couch setups.
• When UI clips, it becomes a navigation problem, not just a “looks” issue.

More from this hub

• Watch page (primary share target)
• Micro-demo backlog