torch-glare 2.5.4 → 2.5.6

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/SectionBlock.tsx

@@ -1,9 +1,13 @@
 import { forwardRef, HTMLAttributes, ReactNode } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
+import { horizontalScrollerStyles } from "../utils/scroller";
 
+// LOCAL PATCH (Contact Center): the pill's side padding is asymmetric (16 leading / 22 trailing),
+// so it must be logical — `ps`/`pe` rather than `pl`/`pr`. This pill heads every section card, so
+// mirrored the wrong way it reads as a systematic misalignment across the whole page.
 const titleBadge = cva(
-  "flex pt-2 pb-2 pl-[16px] pr-[22px] justify-center items-center gap-[6px] rounded-[10px] self-start typography-headers-medium-medium text-[#F4F4F4]",
+  "flex pt-2 pb-2 ps-[16px] pe-[22px] justify-center items-center gap-[6px] rounded-[10px] self-start typography-headers-medium-medium text-[#F4F4F4]",
   {
     variants: {
       color: {
@@ -56,12 +60,29 @@ const header = cva("flex px-[6px] justify-between gap-3", {
   defaultVariants: { variant: "Default" },
 });
 
-const body = cva("flex w-full flex-col", {
+// LOCAL PATCH (Contact Center): the body is the section's horizontal scrollport.
+//
+// `Table` renders `overflow-visible w-auto` (so its sticky header can reach a real scrollport), so
+// a table wider than its card does not clip or scroll itself — it widens the card, and then the
+// page. Only one call site in the app wraps its table in `TableScroller`; the rest drop a bare
+// `<Table>` straight into a section. Owning the scroll here contains all of them at once, and
+// replaces the `Table` variant's old `overflow-hidden`, which truncated instead of scrolling.
+//
+// `overflow-y-hidden` is required, not decorative: CSS computes `overflow-y: visible` to `auto`
+// whenever `overflow-x` is not `visible`, so without it every section grows a spurious vertical
+// scrollbar. The body is content-height, so nothing is clipped vertically. Same reasoning, and the
+// same scrollbar styling, as `TableScroller`.
+//
+// The cost: a scrollport is the containing block for `position: sticky`, so a `<Table>`'s sticky
+// header inside a section now pins to a box that never scrolls vertically — i.e. it stops
+// sticking. Sections hold short tables, and in `variant="Table"` those headers were already inert
+// under the old `overflow-hidden`.
+const body = cva(`flex w-full flex-col ${horizontalScrollerStyles}`, {
   variants: {
     variant: {
       Default: "px-[42px] gap-[2px]",
       // Full bleed, with the rule that separates the header from the table.
-      Table: "mt-[6px] border-t border-border-presentation-global-primary overflow-hidden",
+      Table: "mt-[6px] border-t border-border-presentation-global-primary",
     },
   },
   defaultVariants: { variant: "Default" },

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";
 
@@ -17,11 +16,12 @@ const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
-    VariantProps<typeof PopoverTriggerStyles> & {
-      errors?: string;
-      icon?: string;
-      theme?: Themes;
-    }
+  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>
     );
   },
 );
@@ -126,9 +124,9 @@ SelectScrollDownButton.displayName = "SelectScrollDownButton";
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> &
-    VariantProps<typeof SelectContentStyles> & {
-      theme?: Themes;
-    }
+  VariantProps<typeof SelectContentStyles> & {
+    theme?: Themes;
+  }
 >(
   (
     { className, children, variant = "PresentationStyle", position = "popper", theme, ...props },
@@ -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: {

package/apps/lib/components/SlideDatePicker.tsx

@@ -149,11 +149,11 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
 
     return (
       <Popover onOpenChange={setIsOpen}>
-        {/* The theme goes to the field as a prop, not as `data-theme` on the trigger. `asChild`
-            merges trigger props onto the child, which lands the attribute on the bare <input> — the
-            text then resolves dark tokens while the field around it follows the page, and on a light
-            page the value is white on white. Passing `theme` through means the whole field is dark
-            together, so it stays dark *and* readable. */}
+        {/* `theme` is deliberately NOT passed to the field: only the picker panel below is pinned
+            dark. The field follows the surrounding page instead, so it matches the other inputs
+            next to it. Note it must not be handed down as `data-theme` either — `asChild` merges
+            trigger props onto the child, which would land the attribute on the bare <input> and
+            leave its text resolving dark tokens inside a light field (white on white). */}
         <PopoverTrigger ref={triggerRef} asChild className="w-full flex-1">
           {isValidElement(children) ? (
             cloneElement(children as React.ReactElement<HTMLInputElement & { theme?: string }>, {

package/apps/lib/components/TabSwitch.tsx

@@ -31,13 +31,16 @@ const trackStyles = cva(
     "rounded-[10px]",
     "bg-background-presentation-body-primary",
     "shadow-[inset_0_0_4px_0_rgba(0,0,0,0.08)]",
+    // Contains the active pill's drop-shadow: it is clipped at the track's rounded edge instead
+    // of bleeding onto whatever sits behind the switcher.
+    "overflow-hidden",
   ],
   {
     variants: {
       size: {
-        S: ["gap-[2px] p-[2px]"],
-        M: ["gap-[2px] p-[2px]"],
-        L: ["gap-[3px] p-[3px]"],
+        S: ["p-[2px]"],
+        M: ["p-[2px]"],
+        L: ["p-[3px] rounded-[12px]"],
       },
     },
     defaultVariants: { size: "M" },
@@ -48,7 +51,7 @@ const trackStyles = cva(
 // transparent and lighten on hover.
 const optionStyles = cva(
   [
-    "flex items-center justify-center gap-[4px]",
+    "flex items-center justify-center",
     "rounded-[8px]",
     "font-[510] leading-none",
     "transition-all duration-200 ease-in-out",
@@ -61,7 +64,7 @@ const optionStyles = cva(
       size: {
         S: ["h-5 px-2 text-[12px]", "[&_svg]:h-3 [&_svg]:w-3", "[&_i]:text-[12px]"],
         M: ["h-6 px-3 text-[14px]", "[&_svg]:h-[14px] [&_svg]:w-[14px]", "[&_i]:text-[14px]"],
-        L: ["h-8 px-4 text-[16px]", "[&_svg]:h-4 [&_svg]:w-4", "[&_i]:text-[16px]"],
+        L: ["h-8 px-4 text-[16px] rounded-[10px]", "[&_svg]:h-4 [&_svg]:w-4", "[&_i]:text-[16px]"],
       },
       active: {
         // Active option = a solid raised WHITE pill with dark text, in every
@@ -78,6 +81,8 @@ const optionStyles = cva(
           // keeps both states the same width — without it, selecting a tab resizes the pill and
           // shoves its neighbours. The design's own 4px gap absorbs the 1px.
           "border border-black/5",
+          // The pill casts outward to look raised; the track clips it (`overflow-hidden` on
+          // `trackStyles`) so the shadow never spills past the container.
           "drop-shadow-[0px_0px_5px_rgba(0,0,0,0.25)]",
         ],
         false: [
@@ -116,22 +121,23 @@ function TabSwitchInner<T extends string = string>(
     >
       {options.map((option, idx) => {
         const active = option.value === value;
+        const isDisabled = disabled || option.disabled;
+        // A divider is drawn only between two INACTIVE options — the raised pill is never flanked
+        // by a rule, so the two dividers touching it fade out.
         const prevActive = idx > 0 && options[idx - 1].value === value;
-        // A divider sits between two inactive options only — the active pill is
-        // never flanked by one.
         const showDivider = idx > 0 && !active && !prevActive;
-        const isDisabled = disabled || option.disabled;
 
         return (
           <div key={option.value} className="flex items-center">
             {idx > 0 && (
               <div
                 aria-hidden
+                // The slot is ALWAYS rendered and only its ink changes. Unmounting it instead cost
+                // the track 7px (`w-px` + `mx-[3px]`) every time one went away, so picking a tab
+                // resized the track and shoved its neighbours — with three options, selecting the
+                // middle one dropped both dividers and moved the track 14px.
                 className={cn(
-                  // The slot is always here, and only its ink changes. Unmounting it instead cost
-                  // the track 7px every time the rule below hid one, so picking a tab resized the
-                  // track and shoved its neighbours sideways.
-                  "mx-[3px] h-3 w-px",
+                  "h-3 w-px",
                   showDivider ? "bg-border-presentation-action-disabled" : "bg-transparent",
                 )}
               />