torch-glare 2.5.4 → 2.5.5

package/apps/lib/components/FormRenderer/form-renderer.tsx

@@ -174,11 +174,22 @@ function FormRendererRoot<T extends FieldValues = FieldValues>({
   // and the rail still has room to be legible (a plain `minmax(0,…)` let it collapse to 0 in a
   // narrow preview frame). Past that floor the labels truncate instead of pushing.
   const bodyInner = isStepper ? (
-    <div className="grid w-full grid-cols-[minmax(180px,1fr)_minmax(0,1100px)_minmax(180px,1fr)] gap-8">
-      <StepperNav control={formInstance.control as Control<FieldValues>} />
-      {fieldsColumn}
-      {/* Empty third column — balances the rail's gutter so the middle column is centred. */}
-      <div />
+    // `@container` on the wrapper, not on the grid: an element cannot query its own size, so the
+    // measured box has to be an ancestor. It sits here rather than on the scroll body because
+    // `bodyInner` is also used directly when there is no header, and this way both paths get a
+    // container. The form then reacts to the width it is actually given — a rail, a drawer, a
+    // narrow preview frame — instead of the viewport's.
+    <div className="@container w-full">
+      {/* Below `@lg` the balancing column is dropped: it is empty, and in a narrow container its
+          180px floor plus a 32px gap is width the fields column needs more than the centring.
+          Both halves are required — a `display:none` child is not a grid item, but the third
+          track would still be reserved if the template kept describing it. */}
+      <div className="grid w-full grid-cols-[minmax(180px,1fr)_minmax(0,1100px)] gap-8 @lg:grid-cols-[minmax(180px,1fr)_minmax(0,1100px)_minmax(180px,1fr)]">
+        <StepperNav control={formInstance.control as Control<FieldValues>} />
+        {fieldsColumn}
+        {/* Empty third column — balances the rail's gutter so the middle column is centred. */}
+        <div className="hidden @lg:block" />
+      </div>
     </div>
   ) : (
     fieldsColumn

package/apps/lib/components/HeaderBar.tsx

@@ -22,13 +22,18 @@ import { Themes } from "../utils/types";
  *            (renders plain "sales iNVOICE" on the LEFT, colored "de-344" on the RIGHT)
  */
 
-// Inner row: order is reversed for "detail" so the badge ends up on the right.
-const rowStyles = cva(["flex", "items-center"], {
+// 28px / weight 510 — the design's `Font/Size/Display/Medium`, which is exactly what this class
+// carries. Shared by the badge and the plain title so the two pieces cannot drift apart.
+const headerTextStyles = "typography-display-medium-medium uppercase [font-feature-settings:'cv05'_on]";
+
+// Colored pill holding `label`. 32px tall, 4px side padding, 8px radius — Figma `Header.Badge`.
+const badgeStyles = cva(["flex", "h-8", "items-center", "justify-center", "rounded-lg", "px-1"], {
   variants: {
     variant: {
-      new: "flex-row",
-      edit: "flex-row",
-      detail: "flex-row-reverse",
+      new: "bg-blue-sparkle-alpha-50",
+      edit: "bg-orange-alpha-50",
+      // `White Alpha/15`, not /30 — the detail chip is the faintest of the three.
+      detail: "bg-white-alpha-15",
     },
   },
   defaultVariants: {
@@ -36,49 +41,22 @@ const rowStyles = cva(["flex", "items-center"], {
   },
 });
 
-// Colored pill holding `label`.
-const badgeStyles = cva(
-  ["flex", "h-8", "items-center", "justify-center", "gap-2.5", "rounded-lg", "px-1"],
-  {
-    variants: {
-      variant: {
-        new: "bg-blue-sparkle-alpha-50",
-        edit: "bg-orange-alpha-50",
-        detail: "bg-white-alpha-30",
-      },
-    },
-    defaultVariants: {
-      variant: "new",
-    },
-  },
-);
-
 // Text inside the colored pill.
-const badgeTextStyles = cva(
-  [
-    "font-sans",
-    "text-[28px]",
-    "font-[510]",
-    "leading-normal",
-    "uppercase",
-    "[font-feature-settings:'cv05'_on]",
-  ],
-  {
-    variants: {
-      variant: {
-        new: "text-blue-sparkle-200",
-        edit: "text-orange-200",
-        detail: "text-white-00",
-      },
-    },
-    defaultVariants: {
-      variant: "new",
+const badgeTextStyles = cva([headerTextStyles], {
+  variants: {
+    variant: {
+      new: "text-blue-sparkle-200",
+      edit: "text-orange-200",
+      detail: "text-white-00",
     },
   },
-);
+  defaultVariants: {
+    variant: "new",
+  },
+});
 
 interface HeaderBarProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rowStyles> {
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeStyles> {
   theme?: Themes;
   /** The colored emphasis pill text. */
   label: string;
@@ -88,25 +66,45 @@ interface HeaderBarProps
 
 const HeaderBar = forwardRef<HTMLDivElement, HeaderBarProps>(
   ({ variant = "new", label, title, theme, className, ...props }, ref) => {
+    const badge = (
+      <div className={cn(badgeStyles({ variant }))}>
+        <p className={cn(badgeTextStyles({ variant }))}>{label}</p>
+      </div>
+    );
+
+    // The plain title sits in its own 32px box with 6px side padding — that padding, not a row
+    // `gap`, is what separates it from the badge (matching the design's `padding` frame).
+    const plain = (
+      <div className="flex h-8 items-center justify-center px-1.5">
+        <p className={cn(headerTextStyles, "text-white-00")}>{title}</p>
+      </div>
+    );
+
     return (
       <div
         ref={ref}
         data-theme={theme}
         className={cn(
-          "inline-flex flex-col items-start rounded-[14px] border border-black-600 bg-black-1000 p-1.5 shadow-[0_0_32px_2px_rgba(0,0,0,0.05),0_0_32px_2px_rgba(0,0,0,0.05)]",
+          "inline-flex flex-col items-start overflow-hidden rounded-[14px] border border-black-600 bg-black-1000 p-1.5 shadow-[0_0_32px_2px_rgba(0,0,0,0.05),0_0_32px_2px_rgba(0,0,0,0.05)]",
           className,
         )}
         {...props}
       >
-        <div className={cn(rowStyles({ variant }))}>
-          <div className={cn(badgeStyles({ variant }))}>
-            <p className={cn(badgeTextStyles({ variant }))}>{label}</p>
-          </div>
-          <div className="flex h-8 items-center justify-center px-1.5">
-            <p className="font-sans text-[28px] font-[510] leading-normal uppercase text-white-00 [font-feature-settings:'cv05'_on]">
-              {title}
-            </p>
-          </div>
+        {/* `detail` genuinely swaps the two children rather than using `flex-row-reverse`. The
+            visual result is the same in LTR, but reversing the row would flip the pair the wrong
+            way under `dir="rtl"` and would read out of order to a screen reader. */}
+        <div className="flex items-center">
+          {variant === "detail" ? (
+            <>
+              {plain}
+              {badge}
+            </>
+          ) : (
+            <>
+              {badge}
+              {plain}
+            </>
+          )}
         </div>
       </div>
     );

package/apps/lib/components/InputField.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from "react";
 import { cn } from "../utils/cn";
-import { Tooltip, ToolTipSide } from "./Tooltip";
+import { ToolTipSide } from "./Tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { ActionButton } from "./ActionButton";
 import { Themes } from "../utils/types";
@@ -13,8 +13,13 @@ export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size
   icon?: ReactNode; // to add left side icon if you pass it
   childrenSide?: ReactNode; // to add action button to the end of the input
   popoverChildren?: ReactNode; // to add drop down list if you pass it
-  errorMessage?: string; // to show tooltip component when error_message not null
+  /** Marks the field invalid: any non-undefined value turns on the negative border. */
+  errorMessage?: string;
   onTable?: boolean; // to change the border style of the component when it is on table
+  /**
+   * @deprecated Ignored. The error tooltip was removed — an invalid field is shown by its negative
+   * border alone. Kept so existing call sites keep compiling; it will go in a future major.
+   */
   toolTipSide?: ToolTipSide;
   theme?: Themes;
 }
@@ -29,6 +34,7 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
       errorMessage,
       onTable,
       variant = "PresentationStyle",
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op, destructured to keep it out of the {...props} spread
       toolTipSide,
       theme,
       className,
@@ -49,54 +55,47 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
     // TODO: make the user input visible when input is focused
     return (
       <Popover onOpenChange={setIsPopoverOpen}>
-        <Tooltip
-          theme={theme}
-          toolTipSide={toolTipSide}
-          open={errorMessage !== undefined}
-          text={errorMessage}
-        >
-          <PopoverTrigger ref={triggerRef} asChild>
-            <Group
-              error={errorMessage !== undefined}
-              onTable={onTable}
-              size={size}
-              variant={variant}
-              data-theme={theme}
+        <PopoverTrigger ref={triggerRef} asChild>
+          <Group
+            error={errorMessage !== undefined}
+            onTable={onTable}
+            size={size}
+            variant={variant}
+            data-theme={theme}
+            onFocus={(e) => {
+              setPopoverWidth(e.currentTarget.offsetWidth);
+              setIsPopoverOpen(!isPopoverOpen);
+              inputRef.current?.focus();
+            }}
+            className={className}
+          >
+            {icon && <Icon>{icon}</Icon>}
+            <Input
+              {...props}
               onFocus={(e) => {
-                setPopoverWidth(e.currentTarget.offsetWidth);
-                setIsPopoverOpen(!isPopoverOpen);
-                inputRef.current?.focus();
+                setIsPopoverOpen(true);
+                props.onFocus?.(e);
+              }}
+              onBlur={(e) => {
+                setIsPopoverOpen(false);
+                props.onBlur?.(e);
               }}
-              className={className}
-            >
-              {icon && <Icon>{icon}</Icon>}
-              <Input
-                {...props}
-                onFocus={(e) => {
-                  setIsPopoverOpen(true);
-                  props.onFocus?.(e);
-                }}
-                onBlur={(e) => {
-                  setIsPopoverOpen(false);
-                  props.onBlur?.(e);
-                }}
-                ref={inputRef}
-              />
+              ref={inputRef}
+            />
 
-              <Trilling>
-                {childrenSide}
-                {popoverChildren && (
-                  <PopoverActionButton
-                    size={size}
-                    variant={variant}
-                    isPopoverOpen={isPopoverOpen}
-                    disabled={props.disabled}
-                  />
-                )}
-              </Trilling>
-            </Group>
-          </PopoverTrigger>
-        </Tooltip>
+            <Trilling>
+              {childrenSide}
+              {popoverChildren && (
+                <PopoverActionButton
+                  size={size}
+                  variant={variant}
+                  isPopoverOpen={isPopoverOpen}
+                  disabled={props.disabled}
+                />
+              )}
+            </Trilling>
+          </Group>
+        </PopoverTrigger>
 
         {popoverChildren && !props.disabled && (
           <PopoverContent

package/apps/lib/components/Popover.tsx

@@ -141,10 +141,9 @@ export { Popover, PopoverTrigger, PopoverContent, PopoverItem };
 
 
 const PopoverItemStyles = cva(
-  // Ported from `MenuItemStyles` (ContextMenu/DropdownMenu) so a popover row and a menu row are the
-  // same object, minus the menu's grey `rgba(184,192,204,0.36)` container — a popover row sits
-  // directly on the panel. The inner `<div>` is still the row that lights up on hover/focus, and
-  // `PopoverItem` always renders it, including through `asChild`.
+  // `MenuItemStyles` (ContextMenu/DropdownMenu) minus its grey wrapper fill: same 2px gutter, same
+  // inner `<div>` that lights up on hover/focus, but the row itself stays transparent on the panel.
+  // `PopoverItem` always renders that inner div, including through `asChild`.
   [
     "text-content-presentation-global-primary-light typography-body-medium-regular",
     "outline-none",
@@ -158,6 +157,8 @@ const PopoverItemStyles = cva(
     "overflow-hidden",
     "p-[2px]",
     "transition-all",
+    // No `bg-[rgba(184,192,204,0.36)]` here, unlike the menu's item: a popover row sits directly on
+    // the panel with no grey container behind it. Everything else is the menu's rule set.
     "ease-in-out",
     "duration-300",
     "[&>div]:flex",
@@ -172,8 +173,9 @@ const PopoverItemStyles = cva(
   {
     variants: {
       variant: {
-        // The menu uses Radix's `data-highlighted`; a PopoverItem is a plain button, so the
-        // keyboard-highlight equivalent here is `:focus`.
+        // The menu marks its keyboard highlight with Radix's `data-highlighted` and its disabled
+        // rows with `data-disabled`; a PopoverItem is a plain <button>, so those become `:focus`
+        // and `:disabled` here. Everything else is the menu's rule set verbatim.
         Default: [
           "text-content-presentation-global-primary-light",
           "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
@@ -182,6 +184,7 @@ const PopoverItemStyles = cva(
           "[&:focus>div]:text-black-1000",
           "[&:disabled>div]:text-content-presentation-global-primary-light",
           "[&:disabled>div]:opacity-50",
+          "[&:disabled>div]:hover:text-content-presentation-global-primary-light",
           "[&:disabled>div]:hover:bg-transparent",
           "[&:disabled>div]:hover:shadow-none",
         ],
@@ -191,6 +194,11 @@ const PopoverItemStyles = cva(
           "[&>div]:hover:text-blue-sparkle-700",
           "[&:focus>div]:bg-white-alpha-75",
           "[&:focus>div]:text-blue-sparkle-700",
+          "[&:disabled>div]:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:opacity-50",
+          "[&:disabled>div]:hover:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:hover:bg-transparent",
+          "[&:disabled>div]:hover:shadow-none",
         ],
         Negative: [
           "text-medium-red-200",
@@ -198,6 +206,11 @@ const PopoverItemStyles = cva(
           "[&>div]:hover:text-medium-red-600",
           "[&:focus>div]:bg-white-alpha-75",
           "[&:focus>div]:text-medium-red-600",
+          "[&:disabled>div]:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:opacity-50",
+          "[&:disabled>div]:hover:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:hover:bg-transparent",
+          "[&:disabled>div]:hover:shadow-none",
         ],
         SystemStyle: [
           "bg-background-system-body-primary",
@@ -247,7 +260,10 @@ const PopoverItemStyles = cva(
 
 const popoverStyles = cva(
   [
-    "p-1 max-h-[200px] z-[1000] shrink-0",
+    // Cap at 200px but never exceed the room Radix actually has after collision handling, so a
+    // popover opened near a screen edge shrinks and scrolls instead of being cut off. Consumers that
+    // supply their own inner scroller override this with an inline `maxHeight`, which beats the class.
+    "p-1 max-h-[min(200px,var(--radix-popover-content-available-height,100vh))] z-[1000] shrink-0",
     "rounded-[8px]",
     "border",
     "min-w-[240px]",
@@ -281,8 +297,6 @@ const popoverStyles = cva(
           // translucent: over the previous opaque `form-base` the backdrop-blur painted nothing.
           "bg-[rgba(61,64,69,0.72)]",
           "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
-          // Figma's group-container stacks its rows with a 4px gutter.
-          "flex flex-col gap-1",
         ],
       },
       overlayBlur: {

package/apps/lib/components/SearchableSelect.tsx

@@ -249,19 +249,23 @@ export function SearchableSelect({
         data-theme={theme}
         ref={popoverContentRef}
         variant={variant}
-        style={{ width: dropdownWidth || undefined }}
         onOpenAutoFocus={(e) => e.preventDefault()}
         onWheel={(e) => e.stopPropagation()}
         className={cn(menuContentStyles({ variant }))}
+        // The panel carries the cap — `maxVisibleItems` rows, but never more than the room Radix has
+        // on screen. Inline beats the `max-h-[…]` class popoverStyles contributes.
+        style={{
+          width: dropdownWidth || undefined,
+          maxHeight: `min(${maxVisibleItems * ROW_HEIGHT}px, var(--radix-popover-content-available-height, 100vh))`,
+        }}
       >
-        {/* Dedicated scroll viewport: caps height to ~maxVisibleItems rows and
-            scrolls the rest. Keeping it separate from the popover padding avoids
-            flex/overflow conflicts that block scrolling. */}
+        {/* Dedicated scroll viewport. The height cap lives on the panel above; this just fills what is
+            left and scrolls. `min-h-0` is required — a flex item will not shrink below its content, so
+            without it the list grew past the panel and was clipped instead of scrolling. */}
         <div
           ref={scrollRef}
           onScroll={handleScroll}
-          className="overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide"
-          style={{ maxHeight: maxVisibleItems * ROW_HEIGHT }}
+          className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide"
         >
           {filteredOptions.length > 0 && (
             // Boxed group container — matches the DropdownMenu's auto-grouped look.

package/apps/lib/components/SearchableTree.tsx

@@ -72,6 +72,8 @@ interface Props<T> {
    */
   selectableFolders?: boolean;
   /** Max height (px) of the scrollable tree body before it scrolls (default 320). */
+  /** Height cap for the scrolling body, in px. The panel never exceeds this, nor the room Radix
+   *  has on screen — past it the tree scrolls inside the panel. Default 200. */
   maxBodyHeight?: number;
 
   // --- Async (optional; static `nodes` still works) ---
@@ -112,7 +114,7 @@ export function SearchableTree<T>({
   className,
   defaultExpanded = true,
   selectableFolders = false,
-  maxBodyHeight = 320,
+  maxBodyHeight = 200,
   filterClientSide = true,
   onSearchChange,
   searchDebounceMs = 300,
@@ -299,16 +301,31 @@ export function SearchableTree<T>({
         variant={variant}
         align="start"
         sideOffset={4}
-        style={{ width: dropdownWidth || undefined }}
+        // The panel owns the height: `maxBodyHeight` at most, and never more than the room Radix has
+        // on screen. Inline beats popoverStyles' `max-h-[…]` class.
+        style={{
+          width: dropdownWidth || undefined,
+          maxHeight: `min(${maxBodyHeight}px, var(--radix-popover-content-available-height, 100vh))`,
+        }}
         onOpenAutoFocus={(e) => e.preventDefault()}
         onWheel={(e) => e.stopPropagation()}
-        className="p-0 border-0 bg-transparent shadow-none rounded-[14px] flex flex-col gap-0 overflow-visible"
+        // No `bg-transparent`/`shadow-none`: PopoverContent IS the frosted surface. Forcing it
+        // transparent and moving the glass to the inner div double-blurred (an element with
+        // backdrop-filter forms a backdrop root for its descendants, so the inner one sampled
+        // nothing). `overflow-hidden`, not `overflow-visible` — the list must stay inside the
+        // frosted panel rather than spilling rows over bare page content.
+        className="p-0 border-0 rounded-[14px] flex flex-col gap-0 overflow-hidden"
       >
         {/* SearchResult body — frosted surface holding the "Tree" label + rows. */}
-        <div className="flex w-full items-start">
+        {/* `flex-1 min-h-0 items-stretch`: this wrapper hands the panel's height down to the body.
+            With `items-start` the body sized to its own content and escaped the panel instead. */}
+        <div className="flex w-full flex-1 min-h-0 items-stretch">
           <div
-            className="flex-1 min-w-px overflow-auto scrollbar-hide rounded-[14px] py-[8px] px-[4px] bg-[rgba(61,64,69,0.72)] backdrop-blur-[21px] shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]"
-            style={{ maxHeight: maxBodyHeight }}
+            // Transparent: the frosted surface is the PopoverContent behind it. A second
+            // backdrop-filter here would sample nothing anyway.
+            // The cap now lives on the panel; this fills what is left and scrolls, which needs
+            // `min-h-0` — a flex item will not shrink below its content without it.
+            className="flex-1 min-w-px min-h-0 overflow-auto scrollbar-hide rounded-[14px] p-[4px]"
           >
             {visibleTree.length > 0 ? (
               <div className="flex flex-col gap-[4px]">

package/apps/lib/components/SearchableTreeDialog.tsx

@@ -59,6 +59,9 @@ interface Props<T> {
   searchPlaceholder?: string;
   /** Label shown on the dialog's search field. */
   title?: string;
+  /** Height cap for the scrolling body, in px. Also bounded by 55vh so it shrinks on short
+   *  screens. Past it the tree scrolls inside the dialog. Default 200. */
+  maxBodyHeight?: number;
 
   size?: "XS" | "S" | "M";
   variant?: "SystemStyle" | "PresentationStyle";
@@ -109,6 +112,7 @@ export function SearchableTreeDialog<T>({
   placeholder = "Select…",
   searchPlaceholder = "Search…",
   title = "Select an item",
+  maxBodyHeight = 200,
   size = "M",
   variant = "PresentationStyle",
   icon,
@@ -283,7 +287,13 @@ export function SearchableTreeDialog<T>({
         {/* SearchResult.Container — inset 12px each side, tucked under the bar (z-1). */}
         <div className="flex w-full items-start px-[12px]">
           {/* Body — frosted surface that connects to the bar with rounded-bottom. */}
-          <div className="flex-1 min-w-px max-h-[55vh] overflow-auto scrollbar-hide rounded-b-[14px] pt-[8px] pb-[4px] px-[4px] bg-[rgba(61,64,69,0.72)] backdrop-blur-[21px] shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]">
+          <div
+            // `max-h-[55vh]` alone never engaged: at a 900px viewport that is 495px, far more than
+            // the tree needs, so the body simply grew to fit and there was nothing to scroll.
+            // `maxBodyHeight` is the real cap; 55vh still bounds it on short screens.
+            style={{ maxHeight: `min(${maxBodyHeight}px, 55vh)` }}
+            className="flex-1 min-w-px min-h-0 overflow-auto scrollbar-hide rounded-b-[14px] pt-[8px] pb-[4px] px-[4px] bg-[rgba(61,64,69,0.72)] backdrop-blur-[21px] shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]"
+          >
             {visibleTree.length > 0 ? (
               <div className="flex flex-col gap-[4px]">
                 {/* "Tree" section label. */}

package/apps/lib/components/Select.tsx

@@ -4,7 +4,6 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "../utils/cn";
 import { cva, VariantProps } from "class-variance-authority";
 import { ActionButton } from "./ActionButton";
-import { Tooltip } from "./Tooltip";
 import { MenuItemStyles } from "./DropdownMenu";
 import { Themes } from "../utils/types";
 
@@ -18,6 +17,7 @@ const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
     VariantProps<typeof PopoverTriggerStyles> & {
+      /** Marks the trigger invalid: any non-undefined value turns on the negative border. */
       errors?: string;
       icon?: string;
       theme?: Themes;
@@ -38,52 +38,50 @@ const SelectTrigger = React.forwardRef<
     ref,
   ) => {
     return (
-      <Tooltip toolTipSide={"top"} open={errors !== undefined} text={errors}>
-        <SelectPrimitive.Trigger
-          data-theme={theme}
-          ref={ref}
-          className={cn(
-            PopoverTriggerStyles({
-              size,
-              variant,
-              error: errors !== undefined,
-              onTable,
-            }),
-            className,
-          )}
-          {...props}
+      <SelectPrimitive.Trigger
+        data-theme={theme}
+        ref={ref}
+        className={cn(
+          PopoverTriggerStyles({
+            size,
+            variant,
+            error: errors !== undefined,
+            onTable,
+          }),
+          className,
+        )}
+        {...props}
+      >
+        <p
+          className={cn({
+            "[&_span]:text-[#A0A0A0]": !props.value,
+          })}
         >
-          <p
-            className={cn({
-              "[&_span]:text-[#A0A0A0]": !props.value,
-            })}
-          >
-            {children}
-          </p>
+          {children}
+        </p>
 
-          {/* The shared in-field action button. Its box tracks the trigger height the same way
-              InputField's does — a 30px field takes the 22px button, a 40px field the 32px one. */}
-          <ActionButton
-            as={"span"}
-            size={size === "XL" ? "M" : size === "S" ? "XS" : "S"}
-            className={cn([
-              "group-aria-expanded:bg-background-presentation-action-hover",
-              "group-aria-expanded:text-white",
-            ])}
-          >
-            <i
-              className={cn(
-                "ri-arrow-down-s-line transition-all duration-100 ease-in-out group-aria-expanded:rotate-180",
-                { "!text-[12px]": size === "S" },
-                { "!text-[16px]": size === "M" },
-                { "!text-[18px]": size === "L" },
-                { "!text-[26px]": size === "XL" },
-                { icon: icon },
-              )}
-            />
-          </ActionButton>
-        </SelectPrimitive.Trigger>
-      </Tooltip>
+        {/* The shared in-field action button. Its box tracks the trigger height the same way
+            InputField's does — a 30px field takes the 22px button, a 40px field the 32px one. */}
+        <ActionButton
+          as={"span"}
+          size={size === "XL" ? "M" : size === "S" ? "XS" : "S"}
+          className={cn([
+            "group-aria-expanded:bg-background-presentation-action-hover",
+            "group-aria-expanded:text-white",
+          ])}
+        >
+          <i
+            className={cn(
+              "ri-arrow-down-s-line transition-all duration-100 ease-in-out group-aria-expanded:rotate-180",
+              { "!text-[12px]": size === "S" },
+              { "!text-[16px]": size === "M" },
+              { "!text-[18px]": size === "L" },
+              { "!text-[26px]": size === "XL" },
+              { icon: icon },
+            )}
+          />
+        </ActionButton>
+      </SelectPrimitive.Trigger>
     );
   },
 );
@@ -140,10 +138,19 @@ const SelectContent = React.forwardRef<
         ref={ref}
         className={cn(SelectContentStyles({ variant }), className)}
         position={position}
+        // Never taller than 368px, and never taller than the space Radix has on screen. Valid because
+        // `position` defaults to "popper", which is what publishes the variable.
+        style={{
+          maxHeight: "min(368px, var(--radix-select-content-available-height, 100vh))",
+          ...props.style,
+        }}
         {...props}
       >
-        {/* Dedicated scroll viewport + boxed group, matching SearchableSelect's menu surface. */}
-        <SelectPrimitive.Viewport className="overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
+        {/* Dedicated scroll viewport + boxed group, matching SearchableSelect's menu surface.
+            `flex-1 min-h-0` is what makes it scroll: without `min-h-0` a flex item refuses to shrink
+            below its content, so the list grew past the panel and `overflow-hidden` simply clipped
+            the rows off with no scrollbar. */}
+        <SelectPrimitive.Viewport className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
           <div className="flex flex-col gap-[1px] overflow-hidden rounded-[10px]">{children}</div>
         </SelectPrimitive.Viewport>
       </SelectPrimitive.Content>
@@ -231,7 +238,8 @@ const SelectContentStyles = cva(
     "data-[state=open]:animate-in",
     "data-[state=open]:fade-in-0",
     "z-[1000]",
-    "max-h-[368px]",
+    // Panel height is set inline below from `min(368px, available-height)`; the class is kept off
+    // deliberately so the inline value governs.
   ],
   {
     variants: {