improvement(menus): tighten dropdown spacing and cap the @ mention list

[waleedlatif1]

Summary

Dropdown spacing — the menu was spaced wider than the surfaces it opens over:

• Row icon↔label gap was a re-derived gap-2 (8px); now composes chipContentGap (6px), the token the chips and resource rows already use. The menu's icons are 14px vs the chip's 16px, so the extra 2px read wider still.
• Surface padding p-1.5 → p-1. An 8px row radius + 4px padding is exactly the 12px surface radius, so a first/last row's rounding now tracks its corner instead of cutting across it. Two consumers had already overridden this to p-1 by hand — both overrides removed.
• Separator gutter 13px → 9px. Rows in the same group sit flush at 0px, so 13px made groups read as floating apart.
• DropdownMenuLabel padded to an uncontrolled, font-dependent height (nothing sets a line-height), sat two type steps below its rows, and used a colour heavier than the rows it introduces. Now composes the shared row height at text-caption / --text-muted, matching how the command palette and sidebar set their own section headings.
• Removed dead gap-0.5 from DropdownMenuGroup (zero consumers) and the now-inert gap-0 override it existed for.

@ mention list — it rendered the entire integration catalogue:

• The per-family preview cap defaulted to uncapped, and integration is 300+ near-identical rows sorted first, so nothing else was reachable without scrolling past all of them. Capping is now the default (MENTION_PREVIEW_DEFAULT_LIMIT); a family opts out by raising its own limit. Typing a query still searches every family in full.
• Families are now labelled, so the list says what's mentionable instead of running as one flat alphabetical column.
• Capped to 280px rather than the 420px action-menu default — this one floats over the chat input.
• The integrations shown are curated popular ones rather than whatever sorts first alphabetically. Ranked by normalised display name, not block type, so a version bump can't silently unrank one.

Shared chrome — dropdownMenuRowClass is now exported. Both menus that render plain <button role="menuitem"> (required: mounting/unmounting DropdownMenuItem makes Radix's FocusScope steal focus mid-keystroke) compose it instead of re-deriving row chrome. The / skills menu carried a byte-identical copy of the literal and was migrated too, so it doesn't diverge from the @ menu beside it.

Type of Change

• Improvement

Testing

Verified against the running app in both light and dark themes, measuring the rendered geometry off the live DOM rather than by eye.

• bun run check:audits — 32/32 pass
• bun run lint — 26/26 pass
• bun run type-check — clean in apps/sim and packages/emcn
• Tests: 53 pass in apps/sim, 92 in packages/emcn. 8 new cases covering the preview cap and the popularity comparator — each verified to fail when its fix is reverted.

Note: check-block-registry.ts reports a pre-existing table_v2 / outputColumns subblock failure that reproduces on a clean staging checkout. Unrelated to this PR, which touches no block definitions.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Building	Preview	Aug 22, 2026 3:18am

[cursor]

PR Summary

Low Risk
UI/design-system and mention-menu presentation only. No auth, data, or API changes; preview caps affect empty-query display, not search or selection once the user types.

Overview
Tightens dropdown geometry so menus match chips and other floating surfaces: icon/label gap uses chipContentGap, content padding is p-1, separators are tighter, and DropdownMenuLabel sits on the 28px row grid at text-caption / --text-muted. Exports dropdownMenuRowClass so the @ and / autocomplete lists (plain role="menuitem" buttons) share the same row chrome.

The empty @ mention preview is now capped per family (MENTION_PREVIEW_DEFAULT_LIMIT = 5) via buildMentionPreview, with section labels and a 280px max height so it reads as autocomplete rather than a takeover. Integrations in that preview come from listIntegrationsByPopularity (curated names first, then A–Z); typing still searches the full catalog.

^{Reviewed by Cursor Bugbot for commit 9910ead. Configure here.}

[greptile-apps]

Greptile Summary

This PR standardizes dropdown spacing and row chrome while making the @ mention menu shorter and easier to scan.

• Applies shared menu spacing, padding, label, separator, and row-style tokens across EMCN and workspace consumers.
• Caps empty-query mention previews per resource family while preserving uncapped typed searches.
• Adds labeled mention sections and prioritizes a curated set of popular integrations.
• Adds focused tests for preview capping and integration popularity ordering.

Confidence Score: 5/5

The PR appears safe to merge, with no concrete blocking or independently actionable non-blocking issues identified.

The changed ordering is confined to the intended mention surface, typed searches remain complete, and inserted section labels do not interfere with the menu’s item indexing or scroll targeting.

Important Files Changed

Filename	Overview
packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx	Consolidates reusable menu-row chrome and tightens shared content, label, group, search, and separator spacing without exposing a correctness issue.
apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/plus-menu-dropdown.tsx	Applies per-family preview limits, section labels, a lower height cap, and shared row styling while preserving flat keyboard indexing and uncapped typed search.
apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/resource-mention-items.ts	Adds a small deterministic helper that caps each empty-query resource-family preview while retaining family order.
apps/sim/blocks/integration-matcher.ts	Adds cached popular-first integration ordering while preserving the existing alphabetical listing API for full-catalog consumers.
apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx	Supplies popular-first integrations to the shared resource data consumed by the mention menu; other current hook consumers exclude integrations.
apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx	Changes mention previews from selectively capped to a documented five-item default for every resource family.

_{Reviews (1): Last reviewed commit: "improvement(menus): tighten dropdown spa..." | Re-trigger Greptile}