[fix/feat:ui] Use Kbd for menu shortcuts

[sandersonstabo]

What changed

Menu shortcuts now render through the shared Kbd component with the same compact sizing used by the search shortcut.

Why

The dropdown shortcut pill looked different from Ctrl+K because it used separate text styling instead of the shared keyboard hint component.

UI changes

Before:

After:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Testing

vp check; vp run typecheck passed locally before splitting these PRs.

Note

Replace native kbd with Kbd component in MenuShortcut

Updates menu.tsx to render the shared Kbd component instead of a raw <kbd> element, and swaps font-related classes for sizing/spacing classes (ms-auto h-4 min-w-0 rounded-sm px-1.5 text-[10px]). This changes the DOM output and visual appearance of keyboard shortcuts in menus.

^{Macroscope summarized 7fa11de.}

---

Note

Low Risk
Presentation-only change in menu.tsx; no logic, API, or data handling impact.

Overview
Menu shortcut pills now go through the shared Kbd component instead of a plain <kbd> with one-off typography, so dropdown hints match keyboard hints like Ctrl+K.

MenuShortcut keeps ms-auto and adds compact overrides (h-4, min-w-0, rounded-sm, px-1.5, text-[10px]) on top of Kbd’s muted pill styling. Call sites (MenuShortcut / DropdownMenuShortcut) are unchanged.

^{Reviewed by Cursor Bugbot for commit 7fa11de. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 8e4201e3-f3d8-4a11-9f8f-5f658c658aec

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

Approvability

Verdict: Approved

Minor UI refactor replacing an inline-styled <kbd> element with the existing shared <Kbd> component for consistency. No behavior changes, only visual styling consolidation.

^{You can customize Macroscope's approvability policy. Learn more.}