Refine settings layout and toggle behavior

[rabanspiegel]

Summary

• improve settings theme option cards so they reflow cleanly under zoom/larger text
• make settings modal sizing more viewport-aware to reduce cramping at higher zoom
• align SettingsPage layout with main panel behavior (stable vertical nav + centered content rail)
• make settings open/close behavior consistent across Cmd+, and toolbar settings button
• keep settings open when toggling sidebars/other global view shortcuts
• fix left sidebar state persistence so crossing mobile-width breakpoints does not permanently collapse desktop sidebar

Validation

• pnpm run format
• pnpm run type-check
• pnpm exec eslint src/renderer/App.tsx src/renderer/components/SettingsModal.tsx src/renderer/components/SettingsPage.tsx src/renderer/components/ThemeCard.tsx src/renderer/components/ui/sidebar.tsx src/renderer/hooks/useKeyboardShortcuts.ts

Notes

• eslint output includes pre-existing warnings in touched files (no new errors).

---

Note

Medium Risk
Mostly UI/layout and shortcut-state changes, but it modifies global keyboard shortcut gating and sidebar open-state persistence, which can cause regressions in navigation/toggling behavior across breakpoints.

Overview
Refines Settings UI layout for responsiveness: SettingsModal becomes more viewport-aware (taller max height, scrollable nav, wider max width) and SettingsPage is restructured to a centered content rail with a stable, scrollable left nav.

Makes settings open/close behavior consistent by introducing a single handleToggleSettingsPage used by both keyboard shortcuts and the titlebar settings button.

Adjusts global shortcut dispatch in useKeyboardShortcuts so only the command palette is treated as blocking; settings no longer force-closes when using other global view shortcuts.

Fixes left sidebar state persistence by separating desktopOpen (persisted) from mobileOpen (ephemeral), preventing breakpoint transitions from permanently collapsing the desktop sidebar, and updates ThemeCard option buttons to reflow cleanly under zoom/larger text.

^{Written by Cursor Bugbot for commit 125c1be. This will update automatically on new commits. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Feb 19, 2026 6:43am

[greptile-apps]

Greptile Summary

Refined settings UI responsiveness and interaction behavior. The changes improve viewport adaptability at higher zoom levels, establish consistent toggle behavior for opening/closing settings, and fix sidebar state persistence across mobile/desktop breakpoints.

Major Changes:

• Settings modal and page layouts now use responsive sizing with viewport-aware constraints
• Theme card grid uses auto-fit to reflow cleanly under zoom or larger text
• Settings open/close behavior unified: Cmd+, and toolbar button now toggle instead of only opening
• Global keyboard shortcuts (sidebar toggles, etc.) no longer force-close settings page
• Sidebar state split into separate desktop/mobile states to prevent localStorage corruption when crossing breakpoint thresholds

Confidence Score: 5/5

• Safe to merge with no risk
• All changes are UI/layout refinements with no logic errors, type issues, or security concerns. The code correctly handles state management, uses proper React patterns (useCallback with correct dependencies), and improves accessibility. The PR was validated with format, type-check, and eslint.
• No files require special attention

Important Files Changed

Filename	Overview
src/renderer/App.tsx	Added handleToggleSettingsPage callback to toggle settings instead of only opening them, improving consistency
src/renderer/components/SettingsModal.tsx	Updated modal sizing to be more viewport-aware with responsive width and height constraints
src/renderer/components/SettingsPage.tsx	Refactored layout to use centered content rail with max-width containers and grid-based layout
src/renderer/components/ThemeCard.tsx	Improved theme option cards to use responsive grid with auto-fit layout and better wrapping under zoom
src/renderer/components/ui/sidebar.tsx	Separated desktop and mobile sidebar state to fix persistence issues across breakpoint transitions
src/renderer/hooks/useKeyboardShortcuts.ts	Distinguished command palette from settings overlay to keep settings open during global shortcuts

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User Action] --> B{Action Type?}
    B -->|Cmd+,| C[handleToggleSettingsPage]
    B -->|Settings Button| C
    B -->|Global Shortcuts| D[useKeyboardShortcuts]
    B -->|Sidebar Toggle| E[SidebarProvider]
    
    C --> F{Settings Open?}
    F -->|Yes| G[handleCloseSettingsPage]
    F -->|No| H[openSettingsPage]
    
    D --> I{Check Overlay State}
    I -->|Command Palette Open| J[Close modal before action]
    I -->|Settings Open| K[Allow global shortcuts]
    I -->|No Overlay| K
    
    E --> L{Device Type?}
    L -->|Mobile| M[Update mobileOpen state]
    L -->|Desktop| N[Update desktopOpen state]
    N --> O[Persist to localStorage]
    
    H --> P[SettingsPage]
    P --> Q[Responsive Layout Grid]
    Q --> R[Navigation Sidebar]
    Q --> S[Content Rail]
    S --> T[ThemeCard with Auto-fit Grid]

Loading

_{Last reviewed commit: 125c1be}