fix(ui): render tooltip shortcut hints as plain sans glyphs by Astro-Han · Pull Request #955 · Astro-Han/pawwork

Astro-Han · 2026-05-27T13:41:17Z

Summary

Tooltip shortcut hints (e.g. 新建会话 ⇧⌘S) rendered the shortcut suffix in --font-family-mono. The monospace cell width crammed the modifier glyphs (⇧⌘) into one squished blob. Switch [data-slot="tooltip-keybind-key"] to the sans stack at 12/500 — the macOS-menu convention (plain glyphs, no keycap). One CSS rule fixes every TooltipKeybind site (titlebar, sidebar, composer, session tabs, right-panel review) since they all share the slot.

No linked issue — reported directly from a screenshot of the titlebar tooltip.

Why

The squish came from forcing a monospace font on the suffix, not from missing spacing or a missing keycap. macOS native menus render shortcuts as bare sans glyphs with no box; that is the user's muscle memory and the lightest treatment for a tertiary hover hint. A .kbd keycap was considered (it is the existing design spec) but rejected here as too heavy for a hover hint; the keycap stays for dense scannable surfaces (popover, command palette item-tail). Decision made against real side-by-side variants in the inverse tooltip surface.

Related Issue

None.

Human Review Status

Pending

Review Focus

The font swap on [data-slot="tooltip-keybind-key"] (mono → sans, 12/500). This is the whole behavior change.
Scope: only the tooltip suffix changed. Command palette / popover / sidebar-reorder shortcuts still use the .kbd keycap box on purpose (separate surface, separate design rule) — see Risk Notes for the deferred consistency question.

Risk Notes

No platform/packaging surface: pure CSS in the web renderer, no platform.* / window.api branch. system-ui resolves to SF on macOS and Segoe on Windows; both render the glyphs cleanly. (macOS/Windows checklist item left unticked for that reason.)
Local-only doc synced: docs/DESIGN.md Tooltip + Kbd sections updated to match (plain sans glyphs, keycap reserved for scannable surfaces). docs/ is local-only in this repo, so it is not part of this diff.
Deferred (out of this PR's scope): the same mono-glued shortcut also appears in the command palette item-tail, the sidebar reorder hint, popover shortcut keys, and the keybind editor — all in .kbd keycap boxes. Whether to also drop those to plain glyphs is a separate design decision and was not part of the approved scope.

How To Verify

bun run snap keybind-tooltip
  - asserts the suffix font-family is the sans stack (contains system-ui, not mono)
  - red on the old mono rule (1 failed), green after the fix (1 passed, light+dark grid)
packages/app typecheck (tsgo -b): clean

Screenshots or Recordings

Checklist

The shortcut suffix in icon tooltips (新建会话 ⇧⌘S etc.) rendered in --font-family-mono, whose fixed cell width crammed the modifier glyphs (⇧⌘) into one squished blob. This affected every TooltipKeybind site (titlebar, sidebar, composer, session tabs, right-panel review) because they all share [data-slot="tooltip-keybind-key"]. Switch that slot to the sans stack at 12/500 — the macOS-menu convention (plain glyphs, no keycap). A .kbd keycap was considered but rejected as too heavy for a tertiary hover hint; the keycap stays for dense scannable surfaces (popover, command palette item-tail). Add e2e/snap/keybind-tooltip: asserts the suffix uses the sans stack (never mono) and renders the light/dark grid for visual review. Verified red (mono) -> green (sans) on the real renderer.

coderabbitai · 2026-05-27T13:41:25Z

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 19 minutes and 6 seconds. 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: e855a005-01f3-4b73-9ff1-8c5a3e60ea47

📥 Commits

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

📒 Files selected for processing (2)

packages/app/e2e/snap/keybind-tooltip.snap.ts
packages/ui/src/components/tooltip.css

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/tooltip-keybind-sans

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 changes the keybind tooltip font family from monospace to sans-serif to prevent modifier glyphs from being squished together. It also introduces a Playwright E2E test to verify this font family constraint and capture visual regression snapshots in both light and dark modes. The reviewer recommends using a semantic design system variable (--font-weight-emphasis) instead of a hardcoded font-weight value in tooltip.css to maintain UI consistency.

The chrome ships bilingual; the keybind suffix font is the regression we guard, but the grid only showed the zh label. Render zh + en tooltips stacked (light + dark) and assert the sans-not-mono lock on every suffix, not just the first.

github-actions · 2026-05-27T13:46:01Z

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 -> 24 (-8)	40 -> 40 (0)	98 -> 74 (-24)	48 -> 24 (-24)	33.4 -> 16.8 (-16.6)	166.6 -> 166.6 (0)	4 -> 4 (0)	0 -> 0 (0)	pass
default / long-session-input-lag	48 -> 48 (0)	48 -> 48 (0)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.7 (-0.1)	16.8 -> 16.8 (0)	0 -> 0 (0)	0 -> 0 (0)	pass
default / session-streaming-long	40 -> 32 (-8)	64 -> 64 (0)	111 -> 0 (-111)	61 -> 0 (-61)	16.8 -> 16.7 (-0.1)	116.7 -> 16.8 (-99.9)	1 -> 0 (-1)	0 -> 0 (0)	pass
default / tool-call-expand	24 -> 24 (0)	40 -> 24 (-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)	70 -> 71 (+1)	20 -> 40 (+20)	50 -> 50 (0)	133.4 -> 133.4 (0)	2 -> 3 (+1)	0.004 -> 0.004 (0)	pass
default / terminal-side-panel-open	40 -> 40 (0)	48 -> 48 (0)	0 -> 0 (0)	0 -> 0 (0)	33.3 -> 33.4 (+0.1)	33.4 -> 50 (+16.6)	0 -> 0 (0)	0 -> 0 (0)	pass
default / session-scroll-reading	16 -> 16 (0)	32 -> 16 (-16)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.7 (-0.1)	16.8 -> 16.7 (-0.1)	0 -> 0 (0)	0 -> 0 (0)	pass

Address review: the tooltip container two rules below already uses var(--font-weight-emphasis) (= 500); the keybind suffix should reuse the same semantic token instead of a hardcoded 500.

…ystem 12px sans has no 12px size token (theme.css: 12px is mono-only); the smallest sans is 13px. Use the tooltip's own 13px sans at caption weight (400) — one step lighter than the label's 500 emphasis, so the shortcut reads as secondary. Express only the two intentional properties (sans-not-mono + caption weight); size/line-height/color inherit the tooltip container.

The no-dead-tokens guardrail scans all of packages/ (comments included) for retired typography custom properties. The keybind comment named the old keycap token to explain the anti-mono choice; reword without it.

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

Astro-Han added bug Something isn't working P3 Low priority ui Design system and user interface labels May 27, 2026

github-actions Bot added app Application behavior and product flows P2 Medium priority and removed P3 Low priority labels May 27, 2026

github-actions Bot reviewed May 27, 2026

View reviewed changes

gemini-code-assist Bot reviewed May 27, 2026

View reviewed changes

Comment thread packages/ui/src/components/tooltip.css Outdated

Astro-Han added 3 commits May 27, 2026 21:48

refactor(ui): use --font-weight-emphasis token in tooltip keybind

d4d059b

Address review: the tooltip container two rules below already uses var(--font-weight-emphasis) (= 500); the keybind suffix should reuse the same semantic token instead of a hardcoded 500.

chore(ui): drop dead token name from tooltip keybind comment

eb71145

The no-dead-tokens guardrail scans all of packages/ (comments included) for retired typography custom properties. The keybind comment named the old keycap token to explain the anti-mono choice; reword without it.

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

Astro-Han deleted the claude/tooltip-keybind-sans branch May 27, 2026 14:24

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): render tooltip shortcut hints as plain sans glyphs#955

fix(ui): render tooltip shortcut hints as plain sans glyphs#955
Astro-Han merged 5 commits into
devfrom
claude/tooltip-keybind-sans

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