fix(ui): track List header surface via --list-surface by Astro-Han · Pull Request #954 · Astro-Han/pawwork

Astro-Han · 2026-05-27T13:28:20Z

Summary

In dark mode the Cmd+P command palette painted its "Suggested / Navigation / Panels" section headers as near-black (#1a1917) bands against the warm-grey (#2d2a27) palette body. The List component now lets its host surface drive the sticky group-header background through an inherited --list-surface custom property, so the same fix also clears the identical twin in grouped dialogs.

Why

list.css hardcoded the sticky group-header background to --surface-base. The List is reused inside popovers (picker, command palette, dialogs) that sit on --surface-raised, so every consumer had to override the header background. The command palette's override was both lower specificity (0,2,0 vs list.css's 0,4,0 chain) and imported before list.css, so it lost twice and the header fell through to the darker base surface. Light mode hid it because base and raised are both #ffffff there.

Escalating the selector to win the cascade war is fragile (the next consumer hits the same wall). Instead this parameterizes the seam: the header reads var(--list-surface, var(--surface-base)) (default unchanged for page lists), and raised-surface hosts declare --list-surface once on their container. Inheritance has no specificity or import-order pitfalls.

command-palette.css: set --list-surface on palette-content; drop the dead background override.
picker.css: set --list-surface on picker-content; drop its now-redundant background override (keeps the static-position override).
dialog.css: set --list-surface on dialog-content, fixing the same black-band twin in grouped dialogs (connect-provider, open-project), found by scope-blast.

Related Issue

No issue; reported directly. Scope-blast extension to dialogs confirmed with the requester before including.

Human Review Status

Pending

Review Focus

The --list-surface contract in list.css and that each raised-surface host sets it. Page-level and sidebar lists set nothing and keep --surface-base (unchanged). picker.css keeps its 0,4,0 rule only for position: static.

Risk Notes

Low. Touches a shared component (list.css), but the default fallback preserves existing page-list behavior; only popover/dialog hosts opt in. No platform/packaging surface touched.

How To Verify

New snap e2e/snap/command-palette-header.snap.ts — asserts dark header bg == --surface-raised
  red before fix: rgb(26,25,23) (--surface-base)
  green after fix: rgb(45,42,39) (--surface-raised); light+dark grid reviewed
model-picker-header snap: 1 passed (picker change is safe)
dialog twin: throwaway probe through open-project dialog — header rgb(45,42,39) in dark
typecheck (turbo): 8/8 packages pass

Screenshots or Recordings

Checklist

In dark mode the Cmd+P command palette painted its "Suggested / Navigation / Panels" section headers as near-black (#1a1917) bands against the warm-grey (#2d2a27) palette body. Root cause: list.css hardcodes the sticky group header background to --surface-base. The List is reused inside popovers (picker, command palette, dialogs) that sit on --surface-raised, so each consumer has to override the header background. The command palette's override was both lower specificity (0,2,0 vs list.css's 0,4,0 chain) and imported before list.css, so it lost twice and the header fell through to the darker base surface. Light mode hid the bug because base and raised are both #ffffff there. Fix the seam instead of escalating the selector war: the List header now reads an inherited custom property, background: var(--list-surface, var(--surface-base)) (default unchanged for page lists). Raised-surface hosts declare --list-surface once on their container, so the header tracks them by inheritance with no specificity or import-order fragility: - command-palette.css: set --list-surface on palette-content; drop the dead background override on the header. - picker.css: set --list-surface on picker-content; drop its now- redundant background override (keeps the static-position override). - dialog.css: set --list-surface on dialog-content, fixing the same black-band twin in grouped dialogs (connect-provider, open-project). Verification: - New snap packages/app/e2e/snap/command-palette-header.snap.ts asserts the dark header background equals --surface-raised (red before fix: rgb(26,25,23); green after: rgb(45,42,39)); light + dark grid checked. - model-picker-header snap stays green (picker change is safe). - Dialog twin confirmed fixed via a throwaway probe through the open-project dialog (header rgb(45,42,39) in dark). - typecheck: 8/8 packages pass.

coderabbitai · 2026-05-27T13:28:31Z

Warning

Review limit reached

@Astro-Han, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 15 minutes and 1 second. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: d419af48-1b31-4cd6-8aff-726ff7687b0e

📥 Commits

Reviewing files that changed from the base of the PR and between 306e894 and 533f8d1.

📒 Files selected for processing (6)

packages/app/e2e/snap/command-palette-header.snap.ts
packages/app/e2e/snap/dialog-grouped-header.snap.ts
packages/ui/src/components/command-palette.css
packages/ui/src/components/dialog.css
packages/ui/src/components/list.css
packages/ui/src/components/picker.css

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/command-palette-dark-header

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions

Suggested priority: P2 (includes non-doc, non-test paths outside the low-risk bucket).

P1/P0 are reserved for maintainer confirmation. Please relabel manually if this is a release blocker, security issue, data-loss risk, or updater/runtime failure.

gemini-code-assist

Code Review

This pull request introduces a dynamic mechanism to set the background surface of nested list sticky headers using a new --list-surface CSS custom property, defaulting to --surface-base. This resolves dark mode visual issues where headers appeared as dark bands in popovers, dialogs, and pickers that use --surface-raised. A new E2E test is also added to prevent regressions. The feedback suggests a more robust and simplified way to resolve the CSS variable in the E2E test by directly assigning the var() function to the probe element's style.

Per review: let the browser resolve var(--surface-raised) on the probe element instead of copying the raw value off documentElement. Same result, two lines shorter, robust to where the token is defined.

github-actions · 2026-05-27T13:49:53Z

Perf delta summary

Comparator: pass

Profile / Scenario	interaction median	interaction worst	long task max	tbt	frame gap p95	frame gap max	jank count	cls	status
default / homepage-cold	32 -> 32 (0)	56 -> 40 (-16)	111 -> 71 (-40)	61 -> 21 (-40)	16.8 -> 33.3 (+16.5)	150 -> 183.4 (+33.4)	4 -> 2 (-2)	0 -> 0 (0)	pass
default / long-session-input-lag	48 -> 48 (0)	48 -> 48 (0)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.8 (0)	16.8 -> 16.8 (0)	0 -> 0 (0)	0 -> 0 (0)	pass
default / session-streaming-long	40 -> 32 (-8)	56 -> 56 (0)	0 -> 0 (0)	0 -> 0 (0)	16.7 -> 16.8 (+0.1)	16.8 -> 33.2 (+16.4)	0 -> 0 (0)	0 -> 0 (0)	pass
default / tool-call-expand	24 -> 24 (0)	40 -> 56 (+16)	0 -> 0 (0)	0 -> 0 (0)	16.7 -> 16.7 (0)	16.7 -> 16.7 (0)	0 -> 0 (0)	0 -> 0 (0)	pass
default / tool-default-open-heavy-bash	16 -> 16 (0)	16 -> 24 (+8)	68 -> 68 (0)	18 -> 34 (+16)	50.1 -> 50 (-0.1)	116.7 -> 166.7 (+50)	4 -> 3 (-1)	0.004 -> 0.004 (0)	pass
default / terminal-side-panel-open	48 -> 48 (0)	56 -> 56 (0)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 33.3 (+16.5)	33.3 -> 33.4 (+0.1)	0 -> 0 (0)	0 -> 0 (0)	pass
default / session-scroll-reading	16 -> 16 (0)	16 -> 16 (0)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.8 (0)	16.8 -> 16.8 (0)	0 -> 0 (0)	0 -> 0 (0)	pass

Bump PawWork desktop release version to 2026.5.28. Changes since v2026.5.27: - feat(ui): fold reasoning into trow block (#948) - feat: align outbound HTTP headers with canonical OpenCode desktop (#940) - feat(app): collapse notification settings to single tri-state control (#938) - fix(ui): track List header surface via --list-surface (#954) - fix(ui): render tooltip shortcut hints as plain sans glyphs (#955) - fix(watcher): isolate macOS workspace roots - fix(session): terminalize stale question blockers - fix(session): unify transport error classification for stream disconnect recovery (#941) - test: add route inventory guardrails - ci: repair electron desktop build + install

github-actions Bot added app Application behavior and product flows ui Design system and user interface P2 Medium priority labels May 27, 2026

github-actions Bot reviewed May 27, 2026

View reviewed changes

Astro-Han added the bug Something isn't working label May 27, 2026

gemini-code-assist Bot reviewed May 27, 2026

View reviewed changes

Comment thread packages/app/e2e/snap/command-palette-header.snap.ts Outdated

test: resolve --surface-raised token natively in palette header snap

a15c25b

Per review: let the browser resolve var(--surface-raised) on the probe element instead of copying the raw value off documentElement. Same result, two lines shorter, robust to where the token is defined.

test: guard grouped dialog header surface in dark mode

533f8d1

Astro-Han merged commit e19caab into dev May 27, 2026
27 of 28 checks passed

Astro-Han deleted the claude/command-palette-dark-header branch May 27, 2026 14:34

Astro-Han mentioned this pull request May 27, 2026

chore(release): bump desktop version to v2026.5.28 #958

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ui): track List header surface via --list-surface#954

fix(ui): track List header surface via --list-surface#954
Astro-Han merged 3 commits into
devfrom
claude/command-palette-dark-header

Astro-Han commented May 27, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 27, 2026 •

edited

Loading

Review limit reached

Uh oh!

github-actions Bot left a comment

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented May 27, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Astro-Han commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why

Related Issue

Human Review Status

Review Focus

Risk Notes

How To Verify

Screenshots or Recordings

Checklist

Uh oh!

coderabbitai Bot commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

github-actions Bot commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf delta summary

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Astro-Han commented May 27, 2026 •

edited

Loading

coderabbitai Bot commented May 27, 2026 •

edited

Loading

github-actions Bot commented May 27, 2026 •

edited

Loading