@djangocfg/ui-core 2.1.555 → 2.1.557

package/src/components/navigation/tabs/use-tab-indicator.ts

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from 'react'
+
+/**
+ * Keeps the sliding indicator under the active tab.
+ *
+ * Measurement rather than arithmetic: tabs here carry real words ("All",
+ * "Deals", "Body type"), so they are never equal width and the CSS-only trick
+ * of a fixed `--step` per index drifts as soon as a label changes or a
+ * translation lands. The numbers go out as custom properties and `tabs.css`
+ * does the animating, so React never runs a frame of it.
+ *
+ * It re-measures on the three things that actually move a tab: the selection
+ * changing, the list resizing (a breakpoint, a sidebar opening), and a font
+ * finishing loading — that last one is the subtle one, since a fallback face
+ * lays out at a different width and the pill would otherwise keep a stale one.
+ *
+ * The selection is read from the DOM (`data-state`) rather than taken as an
+ * argument, because that is the one source both controlled and uncontrolled
+ * Tabs agree on — a `value` prop is absent in the uncontrolled case, and
+ * `defaultValue` goes stale the moment the reader clicks.
+ */
+export function useTabIndicator<T extends HTMLElement>() {
+  const ref = React.useRef<T | null>(null)
+  const [ready, setReady] = React.useState(false)
+
+  React.useLayoutEffect(() => {
+    const list = ref.current
+    if (!list) return
+
+    const measure = () => {
+      const tab = list.querySelector<HTMLElement>('[role="tab"][data-state="active"]')
+      if (!tab) return
+      list.style.setProperty('--tab-indicator-x', `${tab.offsetLeft}px`)
+      list.style.setProperty('--tab-indicator-w', `${tab.offsetWidth}px`)
+      setReady(true)
+    }
+
+    measure()
+
+    const resize = new ResizeObserver(measure)
+    resize.observe(list)
+    for (const tab of list.querySelectorAll('[role="tab"]')) resize.observe(tab)
+
+    // Radix flips `data-state` on the triggers; watching the attribute covers
+    // selection by click, by keyboard and by the parent changing `value`,
+    // without this hook needing to know which of the three happened.
+    const mutation = new MutationObserver(measure)
+    mutation.observe(list, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['data-state'],
+      childList: true,
+    })
+
+    // `document.fonts` is absent in older WebViews; the indicator is simply
+    // measured once there instead of re-measured after the swap.
+    document.fonts?.ready.then(measure).catch(() => {})
+
+    return () => {
+      resize.disconnect()
+      mutation.disconnect()
+    }
+  }, [])
+
+  return { ref, ready }
+}

package/src/components/overlay/drawer/index.tsx

@@ -6,18 +6,28 @@ import { Drawer as DrawerPrimitive } from 'vaul';
 import { cn } from '../../../lib/utils';
 import { useIsMobile } from '../../../hooks/media/useMobile';
 
-// Direction context lets <DrawerContent /> inherit the Root's direction without
-// callers having to pass it twice (a frequent rebase / refactor footgun).
-const DrawerDirectionContext = React.createContext<'bottom' | 'right' | 'left' | 'top' | undefined>(undefined);
+type DrawerDirection = 'bottom' | 'right' | 'left' | 'top';
+
+// Context lets <DrawerContent /> inherit what the Root was configured with,
+// without callers having to pass it twice (a frequent rebase / refactor
+// footgun). `snapPoints` matters to the content because the two own the panel's
+// geometry differently — see the note where it is read.
+const DrawerRootContext = React.createContext<{
+  direction?: DrawerDirection;
+  hasSnapPoints: boolean;
+}>({ hasSnapPoints: false });
 
 /** @internal — used by DrawerContent to inherit `direction` from the Root. */
-export const useDrawerDirection = () => React.useContext(DrawerDirectionContext);
+export const useDrawerDirection = () => React.useContext(DrawerRootContext).direction;
+
+/** @internal — true when the Root was given `snapPoints`. */
+const useDrawerHasSnapPoints = () => React.useContext(DrawerRootContext).hasSnapPoints;
 
 const Drawer = ({
   shouldScaleBackground,
   direction = 'bottom',
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root> & { direction?: 'bottom' | 'right' | 'left' | 'top' }) => {
+}: React.ComponentProps<typeof DrawerPrimitive.Root> & { direction?: DrawerDirection }) => {
   // vaul's body-scale animation is a mobile-bottom-sheet effect by design.
   // Applying it to side drawers (right/left) keeps the <body> transformed for
   // ~300ms during open, which on heavy pages stalls the main thread *before*
@@ -26,14 +36,40 @@ const Drawer = ({
   // Default to enabled only for bottom sheets; callers can still override.
   const resolvedScale = shouldScaleBackground ?? direction === 'bottom';
 
+  const hasSnapPoints = Boolean(props.snapPoints?.length);
+  const rootValue = React.useMemo(
+    () => ({ direction, hasSnapPoints }),
+    [direction, hasSnapPoints]
+  );
+
+  // Dim and blur the page from the FIRST snap point, not the last.
+  //
+  // vaul hides the overlay entirely below `fadeFromIndex`, which defaults to
+  // the last snap point — so a sheet resting at 0.5 sat over a page that was
+  // neither dimmed nor blurred (`opacity: 0` on the overlay, while its own
+  // `backdrop-filter: blur(5px)` and 60% scrim were already correct and simply
+  // never visible). That reads as a panel floating over live content rather
+  // than a sheet in front of it. A caller that wants the page to stay legible
+  // until the sheet is expanded can still pass its own index.
+  // vaul types `fadeFromIndex` as a discriminated union against `snapPoints`
+  // (`number` with them, `never` without), which no spread can satisfy
+  // conditionally — hence one assembled object and a single cast at the seam.
+  const rootProps = {
+    ...props,
+    ...(hasSnapPoints &&
+    (props as { fadeFromIndex?: number }).fadeFromIndex === undefined
+      ? { fadeFromIndex: 0 }
+      : null),
+  } as React.ComponentProps<typeof DrawerPrimitive.Root>;
+
   return (
-    <DrawerDirectionContext.Provider value={direction}>
+    <DrawerRootContext.Provider value={rootValue}>
       <DrawerPrimitive.Root
         shouldScaleBackground={resolvedScale}
         direction={direction}
-        {...props}
+        {...rootProps}
       />
-    </DrawerDirectionContext.Provider>
+    </DrawerRootContext.Provider>
   );
 };
 Drawer.displayName = "Drawer"
@@ -107,6 +143,19 @@ const directionStyles = {
   left: "inset-y-0 left-0 h-full border-r",
 } as const;
 
+// The snap-point variant of the above. A snapped panel is FULL height and vaul
+// slides it to the active point by transform, so the `max-h` and the top margin
+// that keep an auto-height sheet on screen are exactly wrong here: they shorten
+// the panel while vaul keeps translating by the full distance, and the sheet
+// lands past the bottom edge. Height comes from the height:100% below, never
+// from a preset.
+const snapDirectionStyles = {
+  bottom: "inset-x-0 bottom-0 h-full rounded-t-lg border-t",
+  top: "inset-x-0 top-0 h-full rounded-b-lg border-b",
+  right: "inset-y-0 right-0 h-full border-l",
+  left: "inset-y-0 left-0 h-full border-r",
+} as const;
+
 const toCssLength = (value: string | number | undefined): string | undefined => {
   if (value == null) return undefined;
   return typeof value === 'number' ? `${value}px` : value;
@@ -178,6 +227,7 @@ const DrawerContent = React.forwardRef<
   const isVertical = direction === 'bottom' || direction === 'top';
   const isMobile = useIsMobile();
   const resizeEnabled = resizable && (!resizableOnDesktopOnly || !isMobile);
+  const hasSnapPoints = useDrawerHasSnapPoints();
 
   const defaultMin = isVertical ? 200 : 280;
   const defaultMax = isVertical ? 800 : 960;
@@ -252,7 +302,12 @@ const DrawerContent = React.forwardRef<
   const rawWidth = !isVertical
     ? (currentPx != null ? `${currentPx}px` : (toCssLength(width) ?? horizontalSizePresets[size]))
     : undefined;
-  const rawHeight = isVertical
+  // With snap points the PANEL is full-height and vaul positions it by
+  // transform, reading back how far it may travel. A height of our own makes
+  // the two disagree: at snap point 0.4 vaul translated a 360px panel by 532px
+  // and pushed it entirely off the bottom of the screen — the drawer opened
+  // into nothing. So when the Root has snap points, the height is vaul's.
+  const rawHeight = isVertical && !hasSnapPoints
     ? (currentPx != null ? `${currentPx}px` : (toCssLength(height) ?? verticalSizePresets[size]))
     : undefined;
   const resolvedWidth = rawWidth ? `min(100vw, ${rawWidth})` : undefined;
@@ -273,13 +328,26 @@ const DrawerContent = React.forwardRef<
         aria-describedby={undefined}
         className={cn(
           "fixed z-500 flex flex-col bg-background",
-          directionStyles[direction],
+          hasSnapPoints ? snapDirectionStyles[direction] : directionStyles[direction],
           className
         )}
         style={{
-          transition: dragStateRef.current
-            ? 'none'
-            : 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)',
+          // With snap points vaul drives `transform` AND the transition that
+          // animates it, writing both to this element imperatively. A
+          // `transition` of ours in the style object is re-applied by React on
+          // every render and wipes that inline `transform` with it, so the
+          // sheet stays parked at its closed offset: measured
+          // `--snap-point-height: 415.5px` (correct) against `transform:
+          // translate3d(0, 831px, 0)` (fully off-screen). The resize handle's
+          // own animation is what this exists for, and resize does not apply
+          // to a snapped sheet.
+          ...(hasSnapPoints
+            ? null
+            : {
+                transition: dragStateRef.current
+                  ? 'none'
+                  : 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)',
+              }),
           ...(resolvedWidth ? { width: resolvedWidth } : {}),
           ...(resolvedHeight ? { height: resolvedHeight } : {}),
           ...style,
@@ -300,7 +368,26 @@ const DrawerContent = React.forwardRef<
             )}
           />
         )}
-        {isVertical && <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />}
+        {/* Everything the reader can see lives inside this column when the
+            sheet is snapped: the panel itself extends past the bottom of the
+            window, so a footer pinned to the PANEL is pinned off-screen.
+            `.drawer-snap-viewport` is the visible slice; without snap points
+            there is no slice to take and the panel is the column. */}
+        <div className={hasSnapPoints ? "drawer-snap-viewport" : "contents"}>
+        {/* The grab handle. `bg-muted` is a SURFACE token — on a light theme it
+            is nearly the panel's own colour, so the handle read as a smudge.
+            `bg-border` is the token for a line drawn ON a surface and is the
+            one that keeps its contrast in both themes. Slimmer and narrower
+            than before, which is what the platform sheets use: the handle is an
+            affordance, not an element of the design.
+            `aria-hidden` because the drag it hints at is not a keyboard
+            affordance — Escape and the close button are. */}
+        {isVertical && (
+          <div
+            aria-hidden
+            className="mx-auto mt-3 h-1.5 w-10 shrink-0 rounded-full bg-border"
+          />
+        )}
         {/*
           Content padding lives HERE, not on each caller. `DialogContent` has
           its own; this did not, so every surface that renders as a Dialog on
@@ -316,10 +403,21 @@ const DrawerContent = React.forwardRef<
           It owns the SCROLL but never the height: `flex-1` here filled the
           panel and left the last row hundreds of pixels above the edge. Only
           the panel's own `max-h` decides how tall the drawer gets.
+
+          With snap points that reasoning inverts. The panel is full-height by
+          then and vaul slides it, so a scroller sized to its content would
+          leave the rest of the sheet empty and unscrollable — there `flex-1`
+          is what makes the body fill the snapped height.
         */}
-        <div className="min-h-0 overflow-y-auto overscroll-contain px-5 pb-[max(1.25rem,env(safe-area-inset-bottom))]">
+        <div
+          className={cn(
+            "min-h-0 overflow-y-auto overscroll-contain px-5 pb-[max(1.25rem,env(safe-area-inset-bottom))]",
+            hasSnapPoints && "flex-1"
+          )}
+        >
           {children}
         </div>
+        </div>
       </DrawerPrimitive.Content>
     </DrawerPortal>
   );

package/src/components/overlay/popover/index.tsx

@@ -15,7 +15,7 @@ const PopoverAnchor = PopoverPrimitive.Anchor
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, forceMount, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, collisionPadding = 8, forceMount, ...props }, ref) => (
   // `forceMount` must reach BOTH halves, and that is the whole reason it is
   // destructured rather than swept up by `...props` (live 2026-08-15).
   //
@@ -44,8 +44,14 @@ const PopoverContent = React.forwardRef<
       aria-describedby={undefined}
       align={align}
       sideOffset={sideOffset}
+      // Radix defaults this to 0, which lets a popover that does not fit below
+      // its trigger flip above it and sit flush against the top edge of the
+      // window, first rows clipped by the viewport. The padding also feeds
+      // `--radix-popover-content-available-height`, which `.popover-panel`
+      // (in the class list below) caps the whole panel to.
+      collisionPadding={collisionPadding}
       className={cn(
-        "z-[1400] w-72 rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "popover-panel z-[1400] w-72 rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/src/components/overlay/side-panel/index.tsx

@@ -5,12 +5,16 @@
  *
  * Use for inspector panels, playgrounds, filters — anywhere you want a
  * slide-in surface that does NOT lock out the rest of the page. The
- * surrounding UI stays clickable and focusable; only Esc (optional) and
- * the close button dismiss the panel.
+ * surrounding UI stays clickable, focusable and scrollable.
+ *
+ * Esc, the close button and a click outside all dismiss it. Having no backdrop
+ * says the page stays usable; it does not say the click should do nothing —
+ * a reader who clicks beside the panel expects it to close, and with only Esc
+ * and a small `×` they had to hunt for the way out.
  *
  * Differences from the existing ``Drawer``:
  *   - ``modal={false}``  — no focus trap, no scroll-lock on <body>.
- *   - No backdrop overlay.
+ *   - No backdrop overlay (the page behind stays legible and live).
  *   - No ``shouldScaleBackground`` (vaul's iOS-style fancy scale looks
  *     wrong for side panels — reserved for bottom sheets).
  *   - Opinionated for ``right``/``left`` directions; vaul still drives
@@ -24,6 +28,7 @@ import * as React from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
 import { X } from 'lucide-react';
 
+import { useComposedRefs } from '../../../lib/compose-refs';
 import { cn } from '../../../lib/utils';
 
 // ─── Root ─────────────────────────────────────────────────────────────────────
@@ -37,6 +42,20 @@ export interface SidePanelProps {
     /** Close when the user presses Escape. Default ``true``. Disable when
      *  the parent wants custom handling or Esc is bound to something else. */
     closeOnEsc?: boolean;
+    /**
+     * Close when the user clicks or taps outside the panel. Default ``true``.
+     *
+     * Having no backdrop is a statement about the PAGE — it stays readable and
+     * clickable — not about the click. Without this the only ways out were Esc
+     * and a small ``×``, so a reader who clicked beside the panel, as every
+     * other overlay has taught them to, got nothing and had to go hunting for
+     * the button.
+     *
+     * Turn it off for a panel the reader works ALONGSIDE — an inspector kept
+     * open while editing the page behind it, where a stray click on the canvas
+     * must not dismiss the thing they are reading from.
+     */
+    closeOnOutsideClick?: boolean;
 }
 
 const SidePanel: React.FC<SidePanelProps> & {
@@ -47,7 +66,11 @@ const SidePanel: React.FC<SidePanelProps> & {
     Body: typeof SidePanelBody;
     Footer: typeof SidePanelFooter;
     Close: typeof SidePanelClose;
-} = ({ open, onOpenChange, children, side = 'right', closeOnEsc = true }) => {
+} = ({ open, onOpenChange, children, side = 'right', closeOnEsc = true, closeOnOutsideClick = true }) => {
+    // The panel element, so the outside-click listener can ask "was this click
+    // inside?" — there is no backdrop to catch it for us.
+    const contentRef = React.useRef<HTMLDivElement | null>(null);
+
     // Esc handling: vaul's built-in closes on Esc only when modal=true.
     // We're non-modal, so we install our own listener — gated on ``open``
     // to avoid swallowing Esc globally while the panel is closed.
@@ -60,6 +83,46 @@ const SidePanel: React.FC<SidePanelProps> & {
         return () => window.removeEventListener('keydown', handler);
     }, [open, closeOnEsc, onOpenChange]);
 
+    // Outside-click handling, for the same reason Esc is handled here: with
+    // `modal={false}` vaul installs no dismissal of its own.
+    //
+    // `pointerdown` rather than `click`, so a press that begins outside closes
+    // even if the pointer travels onto the panel before release. The listener
+    // is added on a later task, otherwise the very click that OPENED the panel
+    // finishes propagating into it and closes it again immediately.
+    React.useEffect(() => {
+        if (!open || !closeOnOutsideClick) return;
+
+        let armed = false;
+        const arm = () => { armed = true; };
+        const id = window.setTimeout(arm, 0);
+
+        const handler = (event: PointerEvent) => {
+            if (!armed) return;
+            const target = event.target as Node | null;
+            if (!target || contentRef.current?.contains(target)) return;
+            // A click inside any overlay the panel itself opened — a Select's
+            // popover, a dialog — lands outside the panel in the DOM, because
+            // both are portalled to <body>. Closing on those would dismiss the
+            // panel the moment a reader picked a value in it.
+            if (
+                target instanceof Element &&
+                target.closest('[data-slot="popover-content"],[role="dialog"],[role="listbox"],[role="menu"]')
+            ) {
+                return;
+            }
+            onOpenChange(false);
+        };
+
+        document.addEventListener('pointerdown', handler, true);
+        return () => {
+            window.clearTimeout(id);
+            document.removeEventListener('pointerdown', handler, true);
+        };
+    }, [open, closeOnOutsideClick, onOpenChange]);
+
+    const contextValue = React.useMemo(() => ({ side, contentRef }), [side]);
+
     return (
         <DrawerPrimitive.Root
             open={open}
@@ -77,7 +140,7 @@ const SidePanel: React.FC<SidePanelProps> & {
             disablePreventScroll
             dismissible
         >
-            <SidePanelSideContext.Provider value={side}>
+            <SidePanelSideContext.Provider value={contextValue}>
                 {children}
             </SidePanelSideContext.Provider>
         </DrawerPrimitive.Root>
@@ -86,7 +149,10 @@ const SidePanel: React.FC<SidePanelProps> & {
 SidePanel.displayName = 'SidePanel';
 
 // Carries the side down to Content so it can place border + transform correctly.
-const SidePanelSideContext = React.createContext<'right' | 'left'>('right');
+const SidePanelSideContext = React.createContext<{
+    side: 'right' | 'left';
+    contentRef?: React.MutableRefObject<HTMLDivElement | null>;
+}>({ side: 'right' });
 
 // ─── Content ──────────────────────────────────────────────────────────────────
 
@@ -101,14 +167,17 @@ const SidePanelContent = React.forwardRef<
     React.ElementRef<typeof DrawerPrimitive.Content>,
     SidePanelContentProps
 >(({ className, children, width = '440px', style, ...props }, ref) => {
-    const side = React.useContext(SidePanelSideContext);
+    const { side, contentRef } = React.useContext(SidePanelSideContext);
+    // Both refs always compose: the caller's, and the panel's own, which the
+    // outside-click listener measures against.
+    const composedRef = useComposedRefs(ref, contentRef ?? null);
     const positioning =
         side === 'right' ? 'inset-y-0 right-0 border-l' : 'inset-y-0 left-0 border-r';
 
     return (
         <DrawerPrimitive.Portal>
             <DrawerPrimitive.Content
-                ref={ref}
+                ref={composedRef}
                 aria-describedby={undefined}
                 className={cn(
                     'fixed z-500 flex flex-col bg-background shadow-2xl shadow-black/20',

package/src/components/select/combobox-async.tsx

@@ -11,6 +11,8 @@ import {
   Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
 } from '../navigation/command';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
+import { SELECT_TRIGGER_CLASS } from './trigger';
+import { useHighlight } from './use-highlight';
 
 export interface ComboboxAsyncOption {
   value: string
@@ -107,7 +109,7 @@ export function ComboboxAsync({
 }: ComboboxAsyncProps) {
   const t = useAppT()
   const [open, setOpen] = React.useState(false)
-  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const highlight = useHighlight(open, value)
 
   const resolvedPlaceholder = placeholder ?? t('ui.select.placeholder')
   const resolvedSearchPlaceholder = searchPlaceholder ?? t('ui.select.search')
@@ -125,19 +127,6 @@ export function ComboboxAsync({
     )
   }, [options, seedOptions, value])
 
-  React.useEffect(() => {
-    if (scrollRef.current && open) {
-      const el = scrollRef.current
-      el.style.cssText = `
-        max-height: 300px !important;
-        overflow-y: auto !important;
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch !important;
-        overscroll-behavior: contain !important;
-      `
-    }
-  }, [open])
-
   const handleSelect = React.useCallback(
     (currentValue: string) => {
       // Click again on the selected row → clear.
@@ -171,7 +160,7 @@ export function ComboboxAsync({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "w-full justify-between",
+            SELECT_TRIGGER_CLASS,
             !selectedOption && "text-muted-foreground",
             className
           )}
@@ -200,21 +189,26 @@ export function ComboboxAsync({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
-        <Command shouldFilter={false} className="flex flex-col">
+        {/* Controlled so the highlight starts on the current selection rather
+            than the first row. `onValueChange` is mandatory with a controlled
+            `value`: cmdk then stores nothing itself and delegates every move to
+            it, so without it the arrow keys would not move the highlight. */}
+        <Command
+          shouldFilter={false}
+          value={highlight.value}
+          onValueChange={highlight.setValue}
+          className="flex flex-col"
+        >
           <CommandInput
             placeholder={resolvedSearchPlaceholder}
             className="shrink-0"
             value={searchValue}
             onValueChange={onSearchChange}
           />
-          <div
-            ref={scrollRef}
-            tabIndex={-1}
-            className="overflow-y-auto overflow-x-hidden"
-            style={{ maxHeight: '300px' }}
-            onWheel={(e) => e.stopPropagation()}
-          >
-            <CommandList className="!max-h-none !overflow-visible" style={{ pointerEvents: 'auto' }}>
+          {/* CommandList is the scroller (it caps itself to the popover's
+              available height) — do not wrap it in a scrolling div: that hands
+              the scrolling to a container cmdk cannot see. */}
+          <CommandList ref={highlight.listRef}>
               {isLoading && options.length === 0 ? (
                 <div className="flex items-center gap-2 px-3 py-6 text-sm text-muted-foreground">
                   <Loader2 className="h-4 w-4 animate-spin" />
@@ -223,7 +217,7 @@ export function ComboboxAsync({
               ) : options.length === 0 ? (
                 <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
               ) : (
-                <CommandGroup className="!overflow-visible" style={{ pointerEvents: 'auto' }}>
+                <CommandGroup>
                   {options.map((option) => (
                     <CommandItem
                       key={option.value}
@@ -233,12 +227,6 @@ export function ComboboxAsync({
                       }}
                       disabled={option.disabled}
                     >
-                      <Check
-                        className={cn(
-                          "mr-2 h-4 w-4 shrink-0",
-                          value === option.value ? "opacity-100" : "opacity-0"
-                        )}
-                      />
                       {option.icon && <option.icon className="mr-2 h-4 w-4 shrink-0" />}
                       {renderOption ? (
                         renderOption(option)
@@ -259,12 +247,18 @@ export function ComboboxAsync({
                           )}
                         </div>
                       )}
+                    
+                      {/* Trailing and only when selected: an always-rendered
+                          `opacity-0` mark indents every row to hold space one
+                          row at most ever uses. Absent it, the label gets the
+                          full width; present, `shrink-0` stops the label's
+                          truncation exactly at the mark. */}
+                      {value === option.value && <Check className="ml-2 h-4 w-4 shrink-0" />}
                     </CommandItem>
                   ))}
                 </CommandGroup>
               )}
             </CommandList>
-          </div>
         </Command>
       </PopoverContent>
     </Popover>