fix(app): unify Windows titlebar chrome and continue sidebar divider - #1283
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe PR refactors desktop titlebar styling in ChangesCross-platform desktop titlebar refinement
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. 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 |
github-actions
Bot
added
app
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request extends the titlebar styling and sidebar-to-content transition effects from macOS to Windows desktop environments, ensuring visual continuity. It introduces a 1px divider line at the sidebar boundary using an absolute-positioned ::after pseudo-element. The review feedback suggests a cleaner approach: drawing the 1px divider line directly within the linear-gradient background of the titlebar. This eliminates the need for the extra pseudo-element and avoids off-canvas positioning when the sidebar is collapsed.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
Windows rendered a flat white toolbar that read as disconnected from both the native title bar above it and the warm-grey sidebar below. Share the macOS unified-chrome treatment with Windows via :is(): the titlebar's left segment carries the sidebar color, the right falls through to the thread background, and the ghost icon buttons get the same radius/hover. The sidebar<->content divider is drawn as border-r border-border-weaker on the sidebar <aside>, which only spans the body row, so the line stopped at the session-title row. Bake the same 1px --border-weaker band into the titlebar gradient at the [sidebar-width - 1px, sidebar-width] boundary so it continues the body divider pixel-for-pixel -- verified identical on macOS and Windows (grey 248,246,243 -> divider 235,235,235 -> content 255). A collapsed sidebar (--sidebar-width: 0px) clamps every gradient stop to 0, so the band vanishes with no extra element or gating. linux is unaffected.
c1c0c1a to
973a333
Compare
1 participant
Summary
Two CSS-only changes in
packages/app/src/index.css, both about the desktop titlebar chrome::is([data-shell-os="macos"], [data-shell-os="windows"])— the titlebar background gradient (left segment carries--sidebar, right falls through to the thread background) and the ghost icon-button radius / hover / expanded-transparent treatment now apply to Windows too. The traffic-light inset (padding-inline-start: 8px) stays macOS-only.--border-weakerband into the titlebar gradient at the[sidebar-width - 1px, sidebar-width]boundary so it continues the body divider (drawn asborder-r border-border-weakeron the sidebar<aside>) pixel-for-pixel. No extra element; a collapsed sidebar (--sidebar-width: 0px) clamps every gradient stop to 0 so the band vanishes.linuxis unaffected. There is no tracked issue; this came from direct design feedback on how Windows renders.Why
On Windows the in-app toolbar rendered as a flat white slab, disconnected from both the native Windows title bar above it and the warm-grey sidebar below. The sidebar↔content divider that runs down the body also stopped at the session-title ("New session") row instead of continuing up through the titlebar.
Related Issue
None — see Summary.
Human Review Status
Pending
Review Focus
--border-weakerband both pivot onsidebar-width - 1px, landing on the body sidebar<aside>'s border-box right edge so the titlebar line is colinear with, and composites to the same shade as, the bodyborder-r border-border-weaker.--sidebar-width: 0px) clamps the gradient stops to 0, so the band disappears with no extra element or gating.Risk Notes
[data-shell-os="macos"|"windows"]titlebar branch;linuxand all non-titlebar surfaces are untouched.How To Verify
Screenshots or Recordings
Rendered before/after comparisons were produced — a full Windows/macOS 4-panel and a 4x-zoomed seam strip — showing the divider absent in the titlebar before and continuous after. They live in the git-ignored
docs/design/preview/screenshots/(divider-before-after.png,seam-zoom.png) and cannot be inlined from the CLI; drag them into the PR if an embedded image is required. The pixel table in How To Verify is the substantive proof that the titlebar and body seams match exactly.Checklist
bug,enhancement,task,documentation. Type labels are author-added; the labeler bot does NOT assign them. Add the label in the GitHub UI, then tick this.app,ui,platform,harness,ci. The labeler bot assigns these on PR open based on changed paths. Confirm the bot's choice (or override if wrong), then tick this.P0,P1,P2,P3. The priority-triage bot suggests one on PR open. Confirm or override, then tick this.Pending,Approved by @<reviewer>, orNot required: <reason>(default isPending; "not required" is restricted to bot-authored low-risk PRs).dev, and my PR title and commit messages use Conventional Commits in English.Summary by CodeRabbit