improvement(emcn): refine shared menu and picker styling (#8836)

Author: waleedlatif1

.claude/rules/emcn-components.md

@@ -17,7 +17,7 @@ Never hand-roll the chip pill from raw class strings (they go stale). Compose fr
 
 Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border` border (`chip-chrome.ts` still spells it through the legacy alias `--border-1`; new code writes `--border`).
 
-The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items use `text-small` and `gap-2` (a menu convention, not the chip pill). Keep them distinct.
+`MENU_STYLES` in `dropdown-menu/styles.ts` owns the shared dropdown, picker-list, and popover chrome. Its default menu rows are 28px at `text-small`; chip pills remain 30px at `text-sm`. Menus reuse the chip gap, row radius, and search-field surface and typography, with a 12px outer radius, 4px padding, and `shadow-medium`. Compose these tokens instead of overriding chrome at call sites. Within the package, shared initialization-time tokens use private imports to avoid public-barrel cycles; consumers import `MENU_STYLES` from `@sim/emcn`.
 
 ## Component catalogue
 
@@ -26,13 +26,13 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
 - **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
 - **`ChipDropdown`** — pill that opens a menu. Single OR multi-select via the discriminated `multiple` prop (one component, not two). Owns its trailing chevron — no `rightIcon`.
-- **`ChipSelect` / `ChipCombobox`** — `Combobox`-backed pickers with search, groups, multi-select; for richer lists than `ChipDropdown`.
+- **`ChipSelect` / `ChipCombobox`** — pickers with search, groups, and multi-select. `ChipSelect` uses `DropdownMenu`; `ChipCombobox` uses `Combobox` for editable input, async options, and virtualized lists. Both inherit the shared menu chrome.
 - **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` (with a `title`) is the escape hatch for controls the field doesn't cover. Every body field is a `ChipModalField`; the gutter rhythm that makes this matter is in `sim-styling.md` → "Form / chip-modal layout rhythm".
 - **`ChipSwitch`** — segmented pill control (built from `chipVariants`).
 - **`ChipTag`** — 20px inline tag/badge (`mono`/`gray`/`invite`), not a pill trigger.
 - **`ChipDatePicker`** — chip-styled date field.
 - **`ChipTimePicker`** — minute-granular time sibling of `ChipDatePicker`, a `ChipInput` that leniently parses typed input (`9:47`, `947`, `2:05pm`, `14:30`), commits on Enter/blur, and re-renders the canonical `9:47 AM` label.
-- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
+- **`DropdownMenu`** — the canonical context/action menu (Radix-backed), styled through `MENU_STYLES`. Reach for it instead of a hand-rolled popover for command/action lists. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
 - **`useScrollEdges` + `scrollFadeClass` / `scrollFadeAttributes`** — the canonical scroll-region edge treatment. The hook reports which edges hide content (tracking scroll and resizes; pass the element itself, held in state, when the region mounts after its owner, e.g. inside a Radix portal); the class and attributes fade a fixed 12px band at an active edge only, so a list that fits or sits at its top is never fogged. A floating control over the top edge sets `--scroll-fade-inset` to its height. A region that scrolls sideways (a tab row, a chip strip) uses `useScrollEdges(ref, { axis: 'x' })` with `scrollFadeXClass`; the attributes helper is shared. Any divider beside the region belongs to the neighboring block (`border-b` above, `border-t` below), never to the masked element, and shows only while that edge is active. Never hand-roll a `mask-image` gradient for a scroll region.
 - **`OverflowText`** — the canonical single-line overflow treatment for read-only human labels and titles. It owns `min-w-0`, fade-only clipping (never an ellipsis), the conditional 18px edge mask, and the full-value floating tooltip; consumers pass only layout/typography through `className`. `overflowTextClipClass` and `overflowTextFadeClass` are the complete base/faded treatments for the rare component that must own measurement itself; never pair either with `truncate`, `text-ellipsis`, or hover-time mask removal. Use `DropdownMenuItemLabel` for a menu label beside icons, checks, or actions. A non-editable `Combobox` passes the full visual value through `overlayLabel`; the combobox owns the visual overlay's fade and keeps its one accessible tooltip on the interactive layer. Keep ordinary `truncate` only for editable values, code/log/path content, dense or virtualized grids, and rich composite content that cannot supply a plain tooltip label. Multiline copy uses an intentional `line-clamp-*` treatment instead.
 

.cursor/rules/emcn-components.mdc

@@ -18,7 +18,7 @@ Never hand-roll the chip pill from raw class strings (they go stale). Compose fr
 
 Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border` border (`chip-chrome.ts` still spells it through the legacy alias `--border-1`; new code writes `--border`).
 
-The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items use `text-small` and `gap-2` (a menu convention, not the chip pill). Keep them distinct.
+`MENU_STYLES` in `dropdown-menu/styles.ts` owns the shared dropdown, picker-list, and popover chrome. Its default menu rows are 28px at `text-small`; chip pills remain 30px at `text-sm`. Menus reuse the chip gap, row radius, and search-field surface and typography, with a 12px outer radius, 4px padding, and `shadow-medium`. Compose these tokens instead of overriding chrome at call sites. Within the package, shared initialization-time tokens use private imports to avoid public-barrel cycles; consumers import `MENU_STYLES` from `@sim/emcn`.
 
 ## Component catalogue
 
@@ -27,13 +27,13 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
 - **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
 - **`ChipDropdown`** — pill that opens a menu. Single OR multi-select via the discriminated `multiple` prop (one component, not two). Owns its trailing chevron — no `rightIcon`.
-- **`ChipSelect` / `ChipCombobox`** — `Combobox`-backed pickers with search, groups, multi-select; for richer lists than `ChipDropdown`.
+- **`ChipSelect` / `ChipCombobox`** — pickers with search, groups, and multi-select. `ChipSelect` uses `DropdownMenu`; `ChipCombobox` uses `Combobox` for editable input, async options, and virtualized lists. Both inherit the shared menu chrome.
 - **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` (with a `title`) is the escape hatch for controls the field doesn't cover. Every body field is a `ChipModalField`; the gutter rhythm that makes this matter is in `sim-styling.md` → "Form / chip-modal layout rhythm".
 - **`ChipSwitch`** — segmented pill control (built from `chipVariants`).
 - **`ChipTag`** — 20px inline tag/badge (`mono`/`gray`/`invite`), not a pill trigger.
 - **`ChipDatePicker`** — chip-styled date field.
 - **`ChipTimePicker`** — minute-granular time sibling of `ChipDatePicker`, a `ChipInput` that leniently parses typed input (`9:47`, `947`, `2:05pm`, `14:30`), commits on Enter/blur, and re-renders the canonical `9:47 AM` label.
-- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
+- **`DropdownMenu`** — the canonical context/action menu (Radix-backed), styled through `MENU_STYLES`. Reach for it instead of a hand-rolled popover for command/action lists. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
 - **`useScrollEdges` + `scrollFadeClass` / `scrollFadeAttributes`** — the canonical scroll-region edge treatment. The hook reports which edges hide content (tracking scroll and resizes; pass the element itself, held in state, when the region mounts after its owner, e.g. inside a Radix portal); the class and attributes fade a fixed 12px band at an active edge only, so a list that fits or sits at its top is never fogged. A floating control over the top edge sets `--scroll-fade-inset` to its height. A region that scrolls sideways (a tab row, a chip strip) uses `useScrollEdges(ref, { axis: 'x' })` with `scrollFadeXClass`; the attributes helper is shared. Any divider beside the region belongs to the neighboring block (`border-b` above, `border-t` below), never to the masked element, and shows only while that edge is active. Never hand-roll a `mask-image` gradient for a scroll region.
 - **`OverflowText`** — the canonical single-line overflow treatment for read-only human labels and titles. It owns `min-w-0`, fade-only clipping (never an ellipsis), the conditional 18px edge mask, and the full-value floating tooltip; consumers pass only layout/typography through `className`. `overflowTextClipClass` and `overflowTextFadeClass` are the complete base/faded treatments for the rare component that must own measurement itself; never pair either with `truncate`, `text-ellipsis`, or hover-time mask removal. Use `DropdownMenuItemLabel` for a menu label beside icons, checks, or actions. A non-editable `Combobox` passes the full visual value through `overlayLabel`; the combobox owns the visual overlay's fade and keeps its one accessible tooltip on the interactive layer. Keep ordinary `truncate` only for editable values, code/log/path content, dense or virtualized grids, and rich composite content that cannot supply a plain tooltip label. Multiline copy uses an intentional `line-clamp-*` treatment instead.
 

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx

@@ -24,6 +24,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   FloatingTooltip,
+  MENU_STYLES,
   OverflowText,
   overflowTextClipClass,
   overflowTextFadeClass,
@@ -552,14 +553,11 @@ function BreadcrumbLocationPopover({
           maxWidth={300}
           maxHeight={420}
           border
-          className={cn(
-            POPOVER_ANIMATION_CLASSES,
-            'bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-xs'
-          )}
+          className={POPOVER_ANIMATION_CLASSES}
           onMouseEnter={openPopover}
           onMouseLeave={scheduleClose}
         >
-          <PopoverSection className='px-1.5 py-0.5 text-[var(--text-muted)] text-xs'>
+          <PopoverSection>
             <span className='inline-flex items-center gap-1'>
               <span>Path</span>
               <span className='opacity-70'>/</span>
@@ -656,7 +654,7 @@ function BreadcrumbLocationItem({
     <>
       <span className='flex size-[18px] shrink-0 items-center justify-center'>
         {Icon ? (
-          <Icon className='size-3 text-[var(--text-icon)]' />
+          <Icon className='size-[14px] text-[var(--text-icon)]' />
         ) : (
           <span className='size-1.5 rounded-full bg-[var(--text-muted)]' />
         )}
@@ -667,11 +665,7 @@ function BreadcrumbLocationItem({
 
   if (onClick) {
     return (
-      <PopoverItem
-        active={active}
-        onClick={onClick}
-        className='h-7 items-center gap-1.5 px-1.5 py-0 text-xs'
-      >
+      <PopoverItem active={active} onClick={onClick}>
         {labelContent}
       </PopoverItem>
     )
@@ -680,7 +674,9 @@ function BreadcrumbLocationItem({
   return (
     <div
       className={cn(
-        'flex h-7 min-w-0 items-center gap-1.5 rounded-lg px-1.5 text-[var(--text-body)] text-xs',
+        MENU_STYLES.rowLayout,
+        MENU_STYLES.sizes.md.className,
+        'text-[var(--text-body)]',
         active && 'bg-[var(--surface-active)]'
       )}
     >

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx

@@ -13,6 +13,7 @@ import {
   Popover,
   PopoverAnchor,
   PopoverContent,
+  PopoverDivider,
   PopoverItem,
   PopoverSection,
   Tooltip,
@@ -135,17 +136,12 @@ export const ViewsMenu = memo(function ViewsMenu({
         maxWidth={320}
         maxHeight={420}
         border
-        className={cn(
-          POPOVER_ANIMATION_CLASSES,
-          'bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-xs'
-        )}
+        className={POPOVER_ANIMATION_CLASSES}
         onMouseEnter={openPopover}
         onMouseLeave={scheduleClose}
         onFocusCapture={cancelScheduledClose}
       >
-        <PopoverSection className='px-1.5 py-0.5 text-[var(--text-muted)] text-xs'>
-          Views
-        </PopoverSection>
+        <PopoverSection>Views</PopoverSection>
         <div className='flex flex-col gap-0.5'>
           {!hasDefaultView && (
             <ViewRow
@@ -194,13 +190,10 @@ export const ViewsMenu = memo(function ViewsMenu({
         </div>
         {canEdit && (
           <>
-            <div className='my-1 h-px bg-[var(--border)]' />
-            <PopoverItem
-              onClick={() => runAndClose(onNewView)}
-              className='h-7 items-center gap-1.5 px-1.5 py-0 text-xs'
-            >
+            <PopoverDivider />
+            <PopoverItem onClick={() => runAndClose(onNewView)}>
               <span className='flex size-[14px] shrink-0 items-center justify-center'>
-                <Plus className='size-3 text-[var(--text-icon)]' />
+                <Plus className='size-[14px] text-[var(--text-icon)]' />
               </span>
               <OverflowText label='New view' className='flex-1 text-left' />
             </PopoverItem>
@@ -265,13 +258,9 @@ function ViewRow({ label, isActive, onSelect, defaultState, actions }: ViewRowPr
 
   return (
     <div className='group/view relative flex items-center'>
-      <PopoverItem
-        active={isActive}
-        onClick={onSelect}
-        className='h-7 min-w-0 flex-1 items-center gap-1.5 px-1.5 py-0 text-xs'
-      >
+      <PopoverItem active={isActive} onClick={onSelect} className='flex-1'>
         <span className='flex size-[14px] shrink-0 items-center justify-center'>
-          {isActive && <Check className='size-3 text-[var(--text-icon)]' />}
+          {isActive && <Check className='size-[14px] text-[var(--text-icon)]' />}
         </span>
         <OverflowText label={label} className='flex-1 text-left' />
         {actionCount > 0 && (

packages/emcn/package.json

@@ -12,6 +12,11 @@
     "bun": ">=1.4.2",
     "node": ">=20.0.0"
   },
+  "imports": {
+    "#chip-chrome": "./src/components/chip/chip-chrome.ts",
+    "#cn": "./src/lib/cn.ts",
+    "#menu-styles": "./src/components/dropdown-menu/styles.ts"
+  },
   "exports": {
     ".": {
       "types": "./src/index.ts",

packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx

@@ -2,6 +2,7 @@
 
 import { forwardRef, useContext, useState } from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { MENU_STYLES } from '#menu-styles'
 import { ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
 import { Calendar, formatDateLabel, formatDateRangeLabel } from '../calendar/calendar'
@@ -149,7 +150,8 @@ const ChipDatePicker = forwardRef<HTMLButtonElement, ChipDatePickerProps>(
             data-native-surface-overlay=''
             className={cn(
               POPOVER_ANIMATION_CLASSES,
-              'z-[var(--z-popover)] origin-[--radix-popover-content-transform-origin] rounded-xl border border-[var(--border-1)] bg-[var(--bg)] shadow-xs'
+              MENU_STYLES.surface,
+              'z-[var(--z-popover)] origin-[--radix-popover-content-transform-origin]'
             )}
           >
             {props.mode === 'range' ? (

packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx

@@ -11,6 +11,7 @@ import {
   useState,
 } from 'react'
 import type { VariantProps } from 'class-variance-authority'
+import { MENU_STYLES } from '#menu-styles'
 import { Check, ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
@@ -346,7 +347,9 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
           ) : (
             <span className={cn(overflowTextClipClass, 'flex-1')}>{option.label}</span>
           )}
-          {showSelectedCheck && isSelected ? <Check className='ml-auto! size-[16px]!' /> : null}
+          {showSelectedCheck && isSelected ? (
+            <Check aria-hidden className={MENU_STYLES.selectionIcon} />
+          ) : null}
         </DropdownMenuItem>
       )
     }
@@ -422,7 +425,9 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
               }}
             >
               <DropdownMenuItemLabel label={allLabel} />
-              {selectedValues.length === 0 ? <Check className='ml-auto! size-[16px]!' /> : null}
+              {selectedValues.length === 0 ? (
+                <Check aria-hidden className={MENU_STYLES.selectionIcon} />
+              ) : null}
             </DropdownMenuItem>
           )}
           {filteredOptions.map(renderItem)}

packages/emcn/src/components/chip-select/chip-select.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import * as React from 'react'
-import { ChevronDown } from '../../icons'
+import { Check, ChevronDown } from '@sim/emcn/icons'
+import { MENU_STYLES } from '#menu-styles'
 import { cn } from '../../lib/cn'
 import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
 import { chipIconSlotClass } from '../chip/chip-chrome'
@@ -232,7 +233,7 @@ export function ChipSelect({
             toggleValue(opt.value)
           }}
         >
-          {Icon ? <Icon className='mr-2 size-[14px] text-[var(--text-icon)]' /> : null}
+          {Icon ? <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' /> : null}
           {opt.label}
         </DropdownMenuCheckboxItem>
       )
@@ -245,6 +246,7 @@ export function ChipSelect({
       >
         {Icon ? <Icon /> : null}
         <DropdownMenuItemLabel label={opt.label} />
+        {value === opt.value ? <Check aria-hidden className={MENU_STYLES.selectionIcon} /> : null}
       </DropdownMenuItem>
     )
   }