feat: improve UI and fix responsive layout - #412
Conversation
PR Context Summary
Suggested issue links
Use |
|
Warning Review limit reached
Next review available in: 42 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe settings interface now has responsive spacing, larger touch targets, clearer interactive states, and additional accessibility attributes. The About section also provides loading feedback while copying the support summary. ChangesSettings UI refinements
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
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 |
ApprovabilityVerdict: Needs human review Unable to check for correctness in d10b967. The changes are low-risk UI styling and accessibility improvements, but the author does not own any of the 7 modified files (all owned by Abhash-Chakraborty). The designated code owner should review these changes per the CODEOWNERS policy. You can customize Macroscope's approvability policy. Learn more. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/app/settings/page.tsx`:
- Line 153: Update the retry button that calls settingsQuery.refetch() to set
disabled and aria-busy from settingsQuery.isFetching, preserving the existing
styling while preventing repeated requests and exposing the fetch state.
In `@frontend/src/components/trash-retention-settings.tsx`:
- Around line 38-42: Update the hint around the button in the trash-retention
settings component so it is not a focusable no-op: either render the explanation
as accessible passive text without a button, or implement an actual disclosure
with activation behavior plus matching aria-expanded and aria-controls
attributes. Preserve the existing hint content and styling where applicable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 3199abea-05ad-47be-9bc3-e988e32d5f87
📒 Files selected for processing (7)
frontend/src/app/settings/page.tsxfrontend/src/components/about-settings.tsxfrontend/src/components/ai-runtime-settings.tsxfrontend/src/components/appearance-settings.tsxfrontend/src/components/hardware-accel-settings.tsxfrontend/src/components/map-privacy-settings.tsxfrontend/src/components/trash-retention-settings.tsx
| <button | ||
| type="button" | ||
| title="Expired items are permanently removed when Trash is opened. Set Never to require manual emptying." | ||
| aria-label="Expired items are permanently removed when Trash is opened. Set Never to require manual emptying." | ||
| className="rounded text-[color:var(--muted)] outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--blue)]" | ||
| className="inline-flex size-11 items-center justify-center rounded-lg text-[color:var(--muted)] outline-none transition hover:bg-[color:var(--surface-hover)] hover:text-[color:var(--near-white)] active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-[color:var(--blue)]" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Replace the no-op information button with an actual disclosure.
Lines 38-42 render a <button> without onClick, popovertarget, or an associated disclosure. Keyboard users can focus and activate it, but activation does nothing. If the hint is passive, render the explanation as accessible text without a button. If it is interactive, add a disclosure with aria-expanded and aria-controls.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/trash-retention-settings.tsx` around lines 38 - 42,
Update the hint around the button in the trash-retention settings component so
it is not a focusable no-op: either render the explanation as accessible passive
text without a button, or implement an actual disclosure with activation
behavior plus matching aria-expanded and aria-controls attributes. Preserve the
existing hint content and styling where applicable.
1 participant
Summary
Improved the Settings page UI/UX by enhancing layout consistency, responsiveness, and accessibility while preserving all existing functionality.
Fixes #358
Type of change
Release impact
What changed
How to test
npm installnpm run devbiome check tsc --noEmit npm test npm run buildChecklist
canaryunless it is the maintainer promotion PRGSSoC'26 checklist
Summary by CodeRabbit
Style
Accessibility
Bug Fixes