Consolidate compact popover menus and embedded panels

Author: Bill Leoutsakos

apps/sim/app/o/[organizationId]/settings/components/integrations/organization-search-stats-period.tsx

@@ -61,7 +61,8 @@ export function OrganizationSearchStatsPeriod({
           tabIndex={-1}
           align='end'
           sideOffset={4}
-          className='w-auto p-0'
+          padding='none'
+          className='w-auto'
           onOpenAutoFocus={() => calendarRef.current?.focus()}
           onCloseAutoFocus={() =>
             triggerContainerRef.current?.querySelector<HTMLElement>('[role="combobox"]')?.focus()

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

@@ -518,7 +518,7 @@ function BreadcrumbLocationPopover({
   return (
     <>
       <LocationFocusVeil visible={open} boundaryRef={veilBoundaryRef} />
-      <Popover size='md' open={open} onOpenChange={setOpen}>
+      <Popover size='compact' open={open} onOpenChange={setOpen}>
         <PopoverAnchor asChild>
           <button
             type='button'
@@ -560,14 +560,12 @@ function BreadcrumbLocationPopover({
           maxWidth={300}
           maxHeight={420}
           border
-          className={cn(
-            POPOVER_ANIMATION_CLASSES,
-            'bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-xs'
-          )}
+          appearance='menu'
+          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>
@@ -675,11 +673,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>
     )

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/message-sources/message-sources.tsx

@@ -36,7 +36,7 @@ export function MessageSources({ sources }: MessageSourcesProps) {
         </Tooltip.Trigger>
         <Tooltip.Content side='top'>{label}</Tooltip.Content>
       </Tooltip.Root>
-      <PopoverContent align='start' side='top' sideOffset={4} className='w-[420px] p-0'>
+      <PopoverContent align='start' side='top' sideOffset={4} padding='none' className='w-[420px]'>
         <div className='flex flex-col py-1'>
           {sources.map((source) => (
             <SourceCard key={source.url} source={source} dense />

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -1571,7 +1571,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
             }}
           >
             <PopoverAnchor className='pointer-events-none absolute inset-0' />
-            <PopoverContent align='start' sideOffset={4} className='w-auto p-0'>
+            <PopoverContent align='start' sideOffset={4} padding='none' className='w-auto'>
               <Calendar
                 mode='range'
                 showTime

apps/sim/app/workspace/[workspaceId]/settings/billing/credit-usage/credit-usage-view.tsx

@@ -192,7 +192,7 @@ export function CreditUsageView({ backHref = '/account/settings/billing' }: Cred
             }}
           >
             <PopoverAnchor className='pointer-events-none absolute inset-0' />
-            <PopoverContent align='start' sideOffset={4} className='w-auto p-0'>
+            <PopoverContent align='start' sideOffset={4} padding='none' className='w-auto'>
               <Calendar
                 mode='range'
                 showTime

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx

@@ -291,7 +291,8 @@ function ReadyInlineDateEditor({
             ref={popoverRef}
             align='start'
             sideOffset={4}
-            className='w-auto p-0'
+            padding='none'
+            className='w-auto'
             onPointerDownCapture={handlePopoverPointerDown}
             onBlurCapture={scheduleBlurSave}
           >

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

@@ -107,7 +107,7 @@ export const ViewsMenu = memo(function ViewsMenu({
   }, [])
 
   return (
-    <Popover size='md' open={open} onOpenChange={setOpen}>
+    <Popover size='compact' open={open} onOpenChange={setOpen}>
       <PopoverAnchor asChild>
         <button
           type='button'
@@ -135,17 +135,13 @@ 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'
-        )}
+        appearance='menu'
+        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
@@ -195,10 +191,7 @@ export const ViewsMenu = memo(function ViewsMenu({
         {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'
-            >
+            <PopoverItem onClick={() => runAndClose(onNewView)}>
               <span className='flex size-[14px] shrink-0 items-center justify-center'>
                 <Plus className='size-3 text-[var(--text-icon)]' />
               </span>
@@ -265,11 +258,7 @@ 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)]' />}
         </span>

apps/sim/ee/audit-logs/components/audit-logs.tsx

@@ -555,7 +555,7 @@ export function AuditLogs({ organizationId }: AuditLogsProps) {
             }}
           >
             <PopoverAnchor className='pointer-events-none absolute inset-0' />
-            <PopoverContent align='start' sideOffset={4} className='w-auto p-0'>
+            <PopoverContent align='start' sideOffset={4} padding='none' className='w-auto'>
               <Calendar
                 mode='range'
                 showTime

apps/sim/ee/organization-usage/components/usage-monitoring.tsx

@@ -321,7 +321,7 @@ export function UsageMonitoring({
               }}
             >
               <PopoverAnchor className='pointer-events-none absolute inset-0' />
-              <PopoverContent align='end' sideOffset={4} className='w-auto p-0'>
+              <PopoverContent align='end' sideOffset={4} padding='none' className='w-auto'>
                 {/** Calendar-day bounds stay date-only; the server makes the end exclusive. */}
                 <Calendar
                   mode='range'

packages/emcn/src/components/popover/popover.tsx

@@ -59,7 +59,7 @@ import { chipActiveSurfaceClass, chipHoverSurfaceClass } from '../chip/chip-chro
 import { InsideModalContext } from '../modal/modal'
 import { TOOLTIP_MAX_WIDTH_PX, TOOLTIP_SURFACE_CLASS } from '../tooltip/tooltip-styles'
 
-type PopoverSize = 'sm' | 'md'
+type PopoverSize = 'sm' | 'md' | 'compact'
 type PopoverColorScheme = 'default' | 'inverted'
 
 /**
@@ -82,6 +82,11 @@ const STYLES = {
       icon: 'size-[14px]',
       section: 'px-1.5 py-1 text-xs',
     },
+    compact: {
+      item: 'h-7 gap-1.5 px-1.5 py-0 text-xs',
+      icon: 'size-3',
+      section: 'px-1.5 py-0.5 text-xs',
+    },
   } satisfies Record<PopoverSize, { item: string; icon: string; section: string }>,
 
   /** Color scheme variants */
@@ -189,6 +194,7 @@ export interface PopoverProps extends PopoverPrimitive.PopoverProps {
    * Size variant of the popover
    * - sm: 11px text, compact spacing (for logs, notifications, context menus)
    * - md: 13px text, default spacing
+   * - compact: 11px text, 28px rows for location and views menus
    * @default 'md'
    */
   size?: PopoverSize
@@ -401,7 +407,12 @@ interface PopoverContentProps
    * Applies a semantic platform surface treatment.
    * @default 'default'
    */
-  appearance?: 'default' | 'tooltip'
+  appearance?: 'default' | 'tooltip' | 'menu'
+  /**
+   * Removes the content's inset padding for embedded calendars and panels.
+   * @default 'default'
+   */
+  padding?: 'default' | 'none'
   /**
    * Flip to avoid viewport collisions
    * @default true
@@ -443,6 +454,7 @@ const PopoverContent = React.forwardRef<
       collisionPadding = 8,
       border = false,
       appearance = 'default',
+      padding = 'default',
       avoidCollisions = true,
       showArrow = false,
       arrowClassName,
@@ -614,6 +626,8 @@ const PopoverContent = React.forwardRef<
           STYLES.colorScheme[colorScheme].content,
           STYLES.content,
           appearance === 'tooltip' && TOOLTIP_SURFACE_CLASS,
+          appearance === 'menu' && 'bg-[var(--bg)] text-[var(--text-body)] shadow-xs',
+          padding === 'none' && 'p-0',
           hasUserWidthConstraint &&
             '[&_.flex-1:not([data-popover-scroll])]:truncate [&_[data-popover-section]]:truncate',
           border && 'border border-[var(--border-1)]',
@@ -842,6 +856,7 @@ const PopoverSection = React.forwardRef<HTMLDivElement, PopoverSectionProps>(
           'mt-1.5 min-w-0 first:mt-0 first:pt-0',
           STYLES.colorScheme[colorScheme].section,
           STYLES.size[size].section,
+          size === 'compact' && colorScheme === 'default' && 'text-[var(--text-muted)]',
           className
         )}
         data-popover-section=''