feat(mobile): show full setting descriptions - #187
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a mobile-only “full description” bottom-sheet to App Settings so phone users can read long setting explanations without accidentally toggling or editing the setting, while preserving existing desktop tooltip behavior.
Changes:
- Adds a settings description layer (dialog) that opens by tapping a setting’s text region on phone layouts, including focus-trap/inert handling and Escape/backdrop/close-button dismissal.
- Styles the bottom-sheet overlay and adds a visual affordance for description-capable settings on mobile.
- Adds a Playwright mobile regression test to ensure opening the description does not toggle the associated setting and that dismissal works.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| test/mobile/settings.test.ts | Adds a regression test covering the new “open full description” interaction and ensuring the switch state doesn’t change. |
| src/web/public/settings-ui.js | Implements the mobile description layer creation, trigger wiring, and focus/inert behavior within the App Settings modal. |
| src/web/public/mobile.css | Adds mobile-only styling for the description trigger affordance and the bottom-sheet dialog/backdrop. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (parentTrap && parentTrap === this.activeFocusTrap) { | ||
| parentTrap.element.addEventListener('keydown', parentTrap.boundHandleKeydown); | ||
| } |
| max-width: 420px; | ||
| max-height: min(60dvh, 420px); | ||
| overflow-y: auto; |
Ark0N
commented
Aug 5, 2026
Hi Lior, closing this one as part of a cleanup of the seventeen PRs currently open from you. The full explanation is in #173, and I would rather you read that one than this note, because it is the honest version and it is not a dismissal of your work. The short form: sixteen PRs opened in a single day, roughly 42,000 added lines in total, landing mostly on the same few files (nine touch Going forward, please keep no more than three open PRs at a time, each one a single behavior change that stands on its own, with a test that fails on master and passes with the fix. #214 and #215, merged today, are good models. If this particular change fixes something that genuinely annoys you in daily use, it is a good candidate to be the first one you reopen on its own, rebased on current master. I will review it properly. Thanks for the effort you put in, and sorry to close it this way. |
Summary
Let phone users open the full description of an App Settings option without toggling or editing that option.
Compact mobile setting tiles truncate long explanations. This adds an accessible bottom-sheet description layer while leaving the existing controls and desktop title tooltips unchanged.
Behavior
Accessibility
role="dialog"andaria-modal="true"on the description panel.role="button",tabindex,aria-haspopup, andaria-controls.Scope Correction
The original test referenced the terminal-controls setting from another feature branch. This split uses the existing upstream Wheel Scrolls Local History setting instead, so the PR targets
masterindependently.Verification
npx vitest run --config test/mobile/vitest.config.ts test/mobile/settings.test.ts -t "opens the full option description"origin/master:mobile defaults: all panels hidden, subagent tracking OFF, ralph OFFsettings survive page reloadnpx prettier --check test/mobile/settings.test.tsnpm run check:frontend-syntaxnpm run check:public-assetsnpm run buildNon-Goals