Part of #1303 (pilot for the settings pages polish pass).
What happens
On Settings → Open Gateway, the listen-address metric tile's value (http://127.0.0.1:3939) overflows its card and bleeds into the neighboring "waiting for token" tile. See attached screenshot.
Where the fix belongs
Not page-local. The card is MetricCard (apps/desktop/src/renderer/settings/settings-metric-card.tsx), a thin alias over the shared StatTile primitive (packages/ui/src/primitives/stat-tile.tsx). The tile already has min-w-0, but the value text itself neither wraps nor truncates. Fix value containment in StatTile so every consumer (Open Gateway, Usage, Remote Access, …) gets it.
Reproduce / baseline
Open the Product/Settings/Pages → OpenGateway story (npm run storybook). If the mocked data doesn't reproduce the overflow, add the long-value variant to the story first — that variant is the baseline.
Acceptance
- Value stays inside its tile for long unbroken strings (URL, token).
- New
packages/ui/stories/stat-tile.stories.tsx covers the long-value variant (plus zero/tone/emphasis variants while we're here).
- A computed-style contract test pins the invariant (value's
scrollWidth <= clientWidth, or explicit wrap/truncate style) — apps/desktop/e2e/settings.spec.ts has the pattern.
- One final-verification screenshot from the live app; confirm other
StatTile consumers are not regressed.
Part of #1303 (pilot for the settings pages polish pass).
What happens
On Settings → Open Gateway, the listen-address metric tile's value (
http://127.0.0.1:3939) overflows its card and bleeds into the neighboring "waiting for token" tile. See attached screenshot.Where the fix belongs
Not page-local. The card is
MetricCard(apps/desktop/src/renderer/settings/settings-metric-card.tsx), a thin alias over the sharedStatTileprimitive (packages/ui/src/primitives/stat-tile.tsx). The tile already hasmin-w-0, but the value text itself neither wraps nor truncates. Fix value containment inStatTileso every consumer (Open Gateway, Usage, Remote Access, …) gets it.Reproduce / baseline
Open the
Product/Settings/Pages → OpenGatewaystory (npm run storybook). If the mocked data doesn't reproduce the overflow, add the long-value variant to the story first — that variant is the baseline.Acceptance
packages/ui/stories/stat-tile.stories.tsxcovers the long-value variant (plus zero/tone/emphasis variants while we're here).scrollWidth <= clientWidth, or explicit wrap/truncate style) —apps/desktop/e2e/settings.spec.tshas the pattern.StatTileconsumers are not regressed.