feat(ui): fill user message bubble (#601 area A)#616
Merged
Conversation
issue #601 area A · first visual slice. light: bubble fills with --surface-interactive-base (#fdf6f0), removes hairline border, bumps radius to 14px and padding to 12/16. brand orange stays out of the bubble fill (Restrained palette discipline). dark: bubble fills with --surface-raised. raised tier was previously #2a2622, only 1.13:1 against --bg-base #1a1714 — visually inseparable. recalibrated to #3a3431 (1.46:1) so the bubble (and other raised-tier surfaces: dialogs, command palette, menus, toasts, keycaps) read as a distinct layer above base. dialog/menu/toast callsites hand-tested. max-width: shifted from min(82%, 64ch) to a flat 75% for both attachments and message body so wide messages don't snap to a narrow column. DESIGN.md L455-461 updated (local-only) to reflect the fill direction and the raised-tier recalibration; preview/message-flow.html mirrored.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis PR tightens dark-mode selectors and lightens the dark raised-surface token to ChangesUser message styling and dark theme refinement
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![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 updates the styling for user messages by adjusting dimensions, padding, and background colors, alongside a recalibration of the --surface-raised theme token. The review identified a missing guard in the dark mode media query that could cause theme switching issues, a regression in hover contrast for list items, and a visual inconsistency between message text and attachments due to the removal of borders.
Perf delta summaryComparator: pass
|
The nested `@media (prefers-color-scheme: dark)` inside `[data-slot="user-message-text"]` lacked the project's `:root:not([data-color-scheme="light"])` mirror guard (see theme.css L430). When the OS is dark but the user has explicitly set PawWork to Light, the bubble would read the light theme's --surface-raised (#ffffff) and blend into the white canvas. Moved the rule outside the parent and added the guard so it mirrors the rest of the theme system. Caught by Gemini and GPT Pro on PR #616.
…ests Two other components had the same bug as the user bubble: a bare `@media (prefers-color-scheme: dark)` without the project's `:root:not([data-color-scheme="light"])` guard. When the OS prefers dark but the user has set PawWork to Light, these blocks fired and overrode light-theme tokens with dark-theme values. - `message-part.css` reasoning-part inline code: opacity 0.6 applied in Light theme on dark-OS systems. Also lacked the parallel `[data-color-scheme="dark"]` selector, so explicit Dark on a light-OS system had no effect at all. Added both. - `switch.css` thumb: dark `#f3ede4` thumb leaked into Light theme on dark-OS systems while the rest of the switch stayed light. Added the guard; the explicit attribute path was already present. Added `packages/ui/test/dark-media-guard.test.ts` to scan all UI CSS and fail when any `@media (prefers-color-scheme: dark)` block is missing the guard. Runs in `bun test`, no browser needed.
GPT Pro flagged that the prior comment ("all UI CSS that ships to the
browser") oversold the scope: the test only scans static CSS files
under src/components and src/styles, and does not see the template
literal in src/theme/loader.ts that builds non-default theme
stylesheets at runtime. The loader.ts gap is tracked in #618.
Astro-Han
force-pushed
the
claude/i601-bubble-fill
branch
from
b743254 to
ad5db46
Compare
`packages/ui/src/theme/loader.ts` and its barrel re-exports in `theme/index.ts` had no callsites anywhere in the monorepo. The live theme application path is `theme/context.tsx`'s `applyThemeCss`, which emits CSS per-mode without `@media (prefers-color-scheme: dark)` at all. `desktop-electron/src/renderer/theme-context.test.ts:8-9` already enforced that the renderer must not import from the `theme/` barrel. GPT Pro's PR #616 review flagged unguarded `@media` blocks inside loader.ts on the assumption it was active; verification showed it was dead. Removing the file is cleaner than guarding code no one calls. Verified: `bun --cwd packages/ui run typecheck`, same for app and desktop-electron, all pass. `dark-media-guard` test still passes and its scope note is trimmed accordingly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
First visual slice of issue #601 area A (message flow). Fills the user bubble and recalibrates the dark
--surface-raisedtier so raised surfaces actually read as a layer above base.--surface-interactive-base(#fdf6f0). Hairline border removed, radius 14px, padding 12/16.--surface-raised.--surface-raisedrecalibrated#2a2622→#3a3431(1.13:1 → 1.46:1 against--bg-base). Lifts every other raised-tier surface too (dialogs, command palette, menus, toasts, keycaps).min(82%, 64ch)to75%for attachments and message body.Why
The shipped build used a white-bubble + hairline-border treatment, but DESIGN.md L455-461 specifies a filled cream tier with no border. The two had drifted apart. On top of that, the dark
--surface-raisedtoken (#2a2622) was only 1.13:1 against--bg-base(#1a1714) — visually inseparable, so a fill-only approach in dark mode would have produced an invisible bubble. The fix is to align the implementation with the design spec and lift the dark raised tier so the fill actually reads.Initial plan kept
--surface-raiseduntouched and hard-coded the bubble in dark mode, leaving a follow-up issue to recalibrate the tier globally. Discarded — it would have left the dark raised tier permanently sitting at 1.13:1 and made the bubble fix a local patch on a broken system. Recalibrating the token in this PR fixes the bubble and every other raised surface in one move, no debt.Related Issue
#601
Human Review Status
Pending. Visual decision was driven by an 8-product survey and HTML side-by-side comparisons; a human should taste-check the final dark and light bubbles in the running app before merge.
Review Focus
--surface-interactive-base(cream tint of brand orange) reading as warm/calm rather than orange-tinted?--surface-raisedrecalibration affects ~6 component roles documented in DESIGN.md (dialog, dock, command palette, menu, toast, keycap). Hand-tested but worth a re-check.Risk Notes
--surface-raisedis consumed by ~71 callsites across the UI. Hand-tested the high-traffic ones (dialogs, command palette, menus, toasts) in dark mode; no regressions observed.--bg-base/--surface-base1.14:1 readability issue surfaced during testing. Out of scope — that's the base tier, not the raised tier. Follow-up tracked separately.DESIGN.mdL455-461,docs/design/preview/message-flow.html.How To Verify
Screenshots or Recordings
Visual decision artifacts (local-only, not in repo):
docs/research/2026-05-14-user-bubble-contrast.md— 8-product surveydocs/design/scratch/bubble-final-Y.html— final mockupLive screenshots from the running build were reviewed during hand-testing and confirmed by the maintainer.
Checklist
enhancement), area (ui), and priority (P2) labelsdev; title and commit use Conventional Commits in EnglishSummary by CodeRabbit
Style
Tests