feat(settings): raise UI scale max to 400% with stepped slider and percent input#509
Conversation
…rcent input The UI scale setting previously capped at 150%. Raise UI_SCALE_MAX to 4 and replace the plain range slider with a new SteppedRangeInput control: - Discrete index-based slider over UI_SCALE_PERCENT_OPTIONS: 5% steps from 75-200%, coarser 25% steps from 200-400% (34 stops total) - Numeric percent input alongside the slider; commits on blur/Enter, Escape reverts, clamps to [75, 400], typed values are not snapped - aria-valuetext announces percent (never the raw index); keyboard changes commit immediately (fixes commit-only-on-pointer-up gap) - Full test coverage: shared clamp, component behavior, settings view wire-up; verified with npm run check (full coordinated suite green) Generated with Amplifier Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: aa220b7574
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <SteppedRangeInput | ||
| value={Math.round((settings.uiScale ?? 1.0) * 100)} | ||
| values={UI_SCALE_PERCENT_OPTIONS} | ||
| unit="%" | ||
| aria-label="UI scale" |
There was a problem hiding this comment.
This replaces the UI-scale setting with the new stepped 75–400% control, but docs/index.html still renders the old mock slider with max="1.5" and no percent input around its UI scale row. AGENTS.md says, “When adding new user-facing features or making significant UI changes, update docs/index.html,” so the default-experience mock will now document the wrong settings UI unless it is updated with this change.
Useful? React with 👍 / 👎.
…der and px input
The terminal font size setting previously capped at 32px. Raise
TERMINAL_FONT_SIZE_MAX to 64 (400% of the 16px base, matching the UI
scale treatment) and move the Font size row to SteppedRangeInput:
- Discrete slider over TERMINAL_FONT_SIZE_PX_OPTIONS: 1px steps from
12-32, 2px steps 34-48, 4px steps 52-64 (33 stops)
- Numeric px input alongside; commits on blur/Enter, Escape reverts,
clamps to [12, 64], typed off-list values (e.g. 33) are legal
- New optional annotation prop on SteppedRangeInput surfaces the
percent-of-base annotation ("16px (100%)") in aria-valuetext and a
live suffix label; no behavior change for callers without it
- docs/index.html mock rows updated (font size max 64; stale UI scale
max from danshapiro#509 fixed to 4)
- Full test coverage incl. keyboard boundary at 32px; verified with
npm run check (full coordinated suite green)
Generated with Amplifier
Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>
2 participants
What changed
UI_SCALE_MAX = 4inshared/settings.ts). A single shared clamp covers the store, localStorage rehydration, and the server legacy-seed migration.SteppedRangeInputcontrol:UI_SCALE_PERCENT_OPTIONS(5% steps 75–200%, 25% steps 200–400%, 34 stops).aria-valuetextannounces the percent value.Why
150% was too low a ceiling for high-DPI / accessibility use; the wider 75–400% range needs a control with sensible discrete stops plus precise numeric entry.
How to verify
SteppedRangeInput.test.tsx(12 tests) plus updates to shared/store/settings-view tests.npm run check— full coordinated suite green (typecheck + 8,609 tests).npm run lint— clean.Breaking changes
None. Existing persisted scale values remain valid; the shared clamp handles all rehydration/migration paths.
Generated with Amplifier