Repository navigation
fix(ui): round the focus ring on the Settings section headings (#955) - #1022
Conversation
The section disclosure buttons take their ring from the shared button:focus-visible fallback in App.css. An outline follows the element's own border-radius and these buttons had none, so they drew the only square focus ring in the app. The fallback rule cannot carry a radius because it also serves round controls, so rounded-md goes on the button, matching the small text button in the Utility Apps section. A sweep of every visible focusable control on a packaged build (games list, open profile editor, open profile menu, all six Settings sections expanded) found these six headings as the only square-cornered ones on main, and none on this branch. Closes #955 Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 16 minutes. View limit detailsLimit details: You’ve used the included review currently available. Review configuration: ⚙️ Run configuration
📒 Files selected for processing (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![stashpeak-review-bot[bot]](https://avatars.githubusercontent.com/in/4331802?s=60&v=4){kind=small}
There was a problem hiding this comment.
🤖 Review Bot
🏷 bugfix 🕐 ~2-5 min 🐞 0 🔐 0 🧪 0 📏 0
A minimal, correct fix: adds rounded-md to the Settings section disclosure button so the shared button:focus-visible outline follows a rounded border-radius. The class is on the button itself, with a comment explaining why. The accompanying test pins a radius class on the button and mirrors the existing #887 swatch test. No behavioral, security, or contract risks found.
Walkthrough (2 files)
| File | Note |
|---|---|
src/renderer/src/components/settings/SettingsSection.tsx |
Adds rounded-md to the disclosure button so its focus outline is rounded; the button has no background or border, so there is no other visual change. |
tests/renderer/settingsSectionFocusRing.test.tsx |
New renderer test asserting the disclosure button carries an all-corners radius class, so removing it would fail the test. |
Total: $0.0010 (plus subscription)
Full-lane cost
Review bot usage
| mode | engine | model | tokens in | tokens out | cost | time | comments |
|---|---|---|---|---|---|---|---|
| full | claude-code | claude (subscription) | 2 | 318 | sub | 4815 ms | 0 |
| shadow | api | deepseek/deepseek-v4-flash | 3775 | 2132 | $0.0003 | 40410 ms | 0 |
| shadow | api | xiaomi/mimo-v2.5 | 3698 | 896 | $0.0006 | 23281 ms | 0 |
| shadow | api | poolside/laguna-xs-2.1:free | 3842 | 2005 | $0.0000 | 71702 ms | 0 |
| shadow | api | nvidia/nemotron-3-ultra-550b-a55b:free | 3817 | 838 | $0.0000 | 22845 ms | 0 |
1 participant
Closes #955
What does this PR do?
Tabbing to a Settings section heading (ABOUT, CONFIG, ...) drew a square focus ring, while every other focus ring in the app is rounded.
The headings take their ring from the shared
button:focus-visiblefallback inApp.css, and an outline follows the element's ownborder-radius. These buttons had none. The fallback rule cannot carry a radius, because the same rule also serves round controls, so the fix isrounded-mdon the button inSettingsSection.tsx, the radius of the small text button in the Utility Apps section. The heading has no background or border, so nothing changes visually except the ring.The issue asked to check the fallback's other named consumers too (the wordmark, the profile-menu trigger, the accent swatches). Rather than read them one by one, I measured every visible focusable control on a packaged build of main: the games list, an open profile editor, an open profile menu, and all six Settings sections expanded. Only the six section headings had a zero radius on all corners; the other consumers already carry their own. On this branch the same sweep finds none.
Part 2 of the issue (some controls seem to animate their focus, others snap) is not in this PR. The issue itself says it needs a visual diff and a design decision before any code, so it should move to its own issue.
What the tests prove
tests/renderer/settingsSectionFocusRing.test.tsx: the disclosure button carries a radius on all four corners. Red on main, green here. It follows the fix: the custom accent swatch has a square focus ring on a round control #887 swatch test, which pins the same thing for the custom accent swatch.Type of change
Smoke check
Checklist
npm run buildpasses (packaged withelectron-builder --dir, unsigned config)npm run typecheckpassesnpm run format:checkpassesScreenshots
Settings with CONFIG focused by Shift+Tab from the first control inside it, so the browser's own keyboard heuristic decides
:focus-visible, on packaged builds on a hidden desktop:main(f88592a;SettingsSection.tsxunchanged up to 5d1133e): radius0px, square ring.6px, rounded ring. Under forced colors the ring isCanvasTextas before, now rounded too.🤖 Generated with Claude Code