fix(settings): align preferences sections and controls

Closed
CX
3d ago
+113-108

Summary

Preferences sections used inconsistent layouts, leaving controls misaligned and wasting horizontal space. This change aligns section descriptions and controls in a consistent two-column layout.

Related Issue

No related issue identified.

Type of Change

  • style: formatting or non-functional styling changes

What Changed

  • Aligned settings content and controls across Preferences sections.
  • Adjusted Updates, AI Agents, MCP Servers, Diagnostics, and other sections to use the available horizontal space more consistently.
  • Hid the sidebar and file explorer titlebar toggles while Preferences is open.
    src/renderer/components/settings/AcpAgentsSettings.tsx
    src/renderer/components/TitlebarPanelToggles.tsx
    src/renderer/pages/app-preferences/ai-agents-section.tsx
    src/renderer/pages/app-preferences/appearance-section.tsx
    src/renderer/pages/app-preferences/behavior-section.tsx
    src/renderer/pages/app-preferences/diagnostics-section.tsx
    src/renderer/pages/app-preferences/mcp-servers-section.tsx
    src/renderer/pages/app-preferences/project-defaults-section.tsx
    src/renderer/pages/app-preferences/reset-section.tsx
    src/renderer/pages/app-preferences/shell-section.tsx
    src/renderer/pages/app-preferences/shortcuts-section.tsx
    src/renderer/pages/app-preferences/updates-section.tsx

How It Was Tested

  • bun run ci (Biome lint + format + imports, strict mode)
  • bun run typecheck
  • bun run test
  • cargo clippy --all-targets -- -D warnings (in src-tauri)
  • cargo test (in src-tauri)
  • Manual verification completed
  • Not applicable

Screenshots or Recordings

Before

https://github.com/user-attachments/assets/b5071116-432e-4d9a-81d5-022cfe6b316d

After

https://github.com/user-attachments/assets/657eb3be-cd66-4526-a342-8a210c6553f3

UI changes are visible in the provided Preferences screenshots.

CI & Review Gate

  • All CI checks pass (PR Validation, Rust Checks, Build Verification, Security Scans)
  • Code review comments from CodeRabbit / Claude have been addressed or resolved
  • No unresolved review findings remain

Checklist

  • My PR title follows the conventional commit format used by this repo
  • I linked the related issue or explained why none exists
  • I updated docs when needed
  • I added or updated tests when needed
  • I verified the change does not introduce unrelated modifications
  • I read AGENTS.md and followed the contributor guidelines
  • A human reviewed the complete diff before submission

Summary by cubic

Aligns Preferences section headers and controls into a consistent layout so settings no longer look misaligned.

  • Replaces the varied flex and width-based layouts with consistent grid/stacked headers across the settings sections.
  • Renders the Updates version info beside the section header.
  • Adds an explicit header prop to the ACP agents settings so its actions (check for updates, add custom agent) sit on the right of the header, with the last-checked status beside the buttons.
  • Includes formatting-only changes to apply-color-theme.ts and editor-store.ts.

Summary by CodeRabbit

  • Improved Settings Layout
    • Updated preference sections to use more consistent responsive layouts, with content stacking on smaller screens and clearer column alignment on wider screens.
    • Moved AI agent controls into the section header and aligned them with the section details.
    • Refined update settings headers to present version information separately from update policies.
  • Bug Fixes
    • No user-facing behavior changes to terminal colors, file saving, or reset actions.