Claude
1ed8646a04
A chip's value carried `white-space: nowrap`, which was there so a signed number never breaks between its sign and its digits. It was applied to every value a chip can hold, and most of them are phrases rather than numbers: a refusal reason, "no change — at its limit", and the whole new value of a free-text stat, which is a sentence the AI wrote rather than a word. An unbreakable phrase sets the chip's minimum width to the width of the phrase, so `max-width: 100%` capped the box while the text kept painting past the rounded border and off the screen. The chip row sits inside the story text, which has nothing to scroll, so the page grew a horizontal scrollbar instead: a 87-character status value measured 470px against a 320px phone. The nowrap now applies only to the signed number, under `chg-num`. Every other value wraps inside its chip, which is what the surrounding `overflow-wrap` already did for the label. Measured in Chromium at 320, 360, 390 and 430px wide: that same value paints between 55px and 165px outside its chip before, and 0px after, with the page no longer scrolling sideways. The number chip stays on one line. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017imUKVPhqophVUZZwJK7ST
React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the Oxlint configuration
If you are developing a production application, use TypeScript with type-aware lint rules enabled. See the TS template for how to integrate TypeScript and Oxlint's TypeScript-related rules in your project.