@domicile-desktop/component-library 0.0.0-alpha-96a82ac5b3d7 → 0.0.0-alpha-e01fbd8cc446

package/README.md

@@ -37,6 +37,7 @@ Each export is `@domicile-desktop/component-library/<name>`.
 | `PortalDialogs` | Every dialog applications ask for through the desktop portal. Mount one per shell with `host={domicile}`; it refuses kinds it cannot draw. `omitScreenCasts` leaves screen casts out of its indicator. See [PORTALS.md](/docs/PORTALS.md). |
 | `source-name` | `sourceName`: how a screen cast's source is named. |
 | `Popover` | Non-modal panel anchored to the control that opened it. |
+| `PopupBoundary` | Keeps every popup inside it (tooltips, popovers, menus, lists) within a box, such as a window's frame. Outside one, popups stay on their `Screen`. `Popover` and `Tooltip` take `spansWindows` to leave it. |
 | `Provider` | base-ui `DirectionProvider` wrapper. Every app roots its tree in it. |
 | `Screen` | Renders its children once per selected display. |
 | `DisplayProvider` | Supplies the host's displays to `Screen`. |

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-96a82ac5b3d7",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-96a82ac5b3d7",
+    "@domicile-desktop/sdk": "0.0.0-alpha-e01fbd8cc446",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-e01fbd8cc446",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -60,6 +60,7 @@
     "./media-theme-source": "./src/ThemeSwitch/media-theme-source.ts",
     "./Notice": "./src/Notice/Notice.tsx",
     "./Popover": "./src/Popover/Popover.tsx",
+    "./PopupBoundary": "./src/PopupBoundary/PopupBoundary.tsx",
     "./PortalDialogs": "./src/PortalDialogs/PortalDialogs.tsx",
     "./Provider": "./src/Provider/Provider.tsx",
     "./pandacss-preset": "./src/pandacss-preset.ts",
@@ -119,5 +120,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-96a82ac5b3d7"
+  "version": "0.0.0-alpha-e01fbd8cc446"
 }

package/src/Autocomplete/Autocomplete.tsx

@@ -8,6 +8,7 @@ import { focusControlOnMouseDown } from "../_control/focus";
 import { PrefixIconStack } from "../_control/PrefixIconStack";
 import { wrapperBase } from "../_control/wrapperBase";
 import type { ExtendProps } from "../extend-props";
+import { usePopupBoundary } from "../PopupBoundary/PopupBoundary";
 
 export { SIZES, type Size } from "../control-sizes";
 
@@ -84,84 +85,89 @@ export const Autocomplete = <V,>({
   value,
   width,
   ...inputProps
-}: Props<V>) => (
-  <BaseAutocomplete.Root<Suggestion<V>>
-    autoHighlight={autoHighlight}
-    disabled={disabled}
-    items={suggestions}
-    itemToStringValue={(suggestion) => suggestion.text}
-    // `inline` skips base-ui's filtering; the caller already filtered
-    // `suggestions`.
-    mode="inline"
-    onValueChange={(next) => {
-      onValueChange?.(next);
-    }}
-    value={value}
-  >
-    {/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: focuses the field when the wrapper's padding is clicked; mirrors native <label> behavior without a second label polluting the accessible name */}
-    {/* biome-ignore lint/a11y/noStaticElementInteractions: focuses the field when the wrapper's padding is clicked; mirrors native <label> behavior without a second label polluting the accessible name */}
-    <div
-      className={cx(
-        control({ size }),
-        wrapperBase,
-        wrapperStyles({ rounded, size }),
-      )}
-      onMouseDown={focusControlOnMouseDown}
-      style={controlSizingStyle({ width })}
+}: Props<V>) => {
+  const { attach, boundary } = usePopupBoundary(false);
+  return (
+    <BaseAutocomplete.Root<Suggestion<V>>
+      autoHighlight={autoHighlight}
+      disabled={disabled}
+      items={suggestions}
+      itemToStringValue={(suggestion) => suggestion.text}
+      // `inline` skips base-ui's filtering; the caller already filtered
+      // `suggestions`.
+      mode="inline"
+      onValueChange={(next) => {
+        onValueChange?.(next);
+      }}
+      value={value}
     >
-      {prefixButtons === undefined ? (
-        <PrefixIconStack prefixIcon={prefixIcon} size={size} />
-      ) : (
-        <span className={affixStyles}>{prefixButtons}</span>
-      )}
-      <BaseAutocomplete.Input
-        {...inputProps}
-        className={inputStyles}
-        data-control=""
-      />
-      {suffixButtons !== undefined && (
-        <span className={affixStyles}>{suffixButtons}</span>
-      )}
-    </div>
-    <BaseAutocomplete.Portal>
-      <BaseAutocomplete.Positioner
-        align="start"
-        className={positionerStyles}
-        side="bottom"
-        sideOffset={6}
+      {/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: focuses the field when the wrapper's padding is clicked; mirrors native <label> behavior without a second label polluting the accessible name */}
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: focuses the field when the wrapper's padding is clicked; mirrors native <label> behavior without a second label polluting the accessible name */}
+      <div
+        className={cx(
+          control({ size }),
+          wrapperBase,
+          wrapperStyles({ rounded, size }),
+        )}
+        onMouseDown={focusControlOnMouseDown}
+        ref={attach}
+        style={controlSizingStyle({ width })}
       >
-        <BaseAutocomplete.Popup className={popupStyles}>
-          <BaseAutocomplete.Empty className={emptyStyles}>
-            {emptyMessage}
-          </BaseAutocomplete.Empty>
-          <BaseAutocomplete.List className={listStyles}>
-            {suggestions.map((suggestion, index) => (
-              <BaseAutocomplete.Item
-                className={itemStyles}
-                index={index}
-                key={index}
-                onClick={() => {
-                  onSuggestionTaken?.(suggestion.value);
-                }}
-                value={suggestion}
-              >
-                {suggestion.icon !== undefined && (
-                  <span className={itemIconStyles}>{suggestion.icon}</span>
-                )}
-                <span className={itemLabelStyles}>{suggestion.label}</span>
-                {suggestion.description !== undefined && (
-                  <span className={itemDescriptionStyles}>
-                    {suggestion.description}
-                  </span>
-                )}
-              </BaseAutocomplete.Item>
-            ))}
-          </BaseAutocomplete.List>
-        </BaseAutocomplete.Popup>
-      </BaseAutocomplete.Positioner>
-    </BaseAutocomplete.Portal>
-  </BaseAutocomplete.Root>
-);
+        {prefixButtons === undefined ? (
+          <PrefixIconStack prefixIcon={prefixIcon} size={size} />
+        ) : (
+          <span className={affixStyles}>{prefixButtons}</span>
+        )}
+        <BaseAutocomplete.Input
+          {...inputProps}
+          className={inputStyles}
+          data-control=""
+        />
+        {suffixButtons !== undefined && (
+          <span className={affixStyles}>{suffixButtons}</span>
+        )}
+      </div>
+      <BaseAutocomplete.Portal>
+        <BaseAutocomplete.Positioner
+          align="start"
+          className={positionerStyles}
+          collisionBoundary={boundary}
+          side="bottom"
+          sideOffset={6}
+        >
+          <BaseAutocomplete.Popup className={popupStyles}>
+            <BaseAutocomplete.Empty className={emptyStyles}>
+              {emptyMessage}
+            </BaseAutocomplete.Empty>
+            <BaseAutocomplete.List className={listStyles}>
+              {suggestions.map((suggestion, index) => (
+                <BaseAutocomplete.Item
+                  className={itemStyles}
+                  index={index}
+                  key={index}
+                  onClick={() => {
+                    onSuggestionTaken?.(suggestion.value);
+                  }}
+                  value={suggestion}
+                >
+                  {suggestion.icon !== undefined && (
+                    <span className={itemIconStyles}>{suggestion.icon}</span>
+                  )}
+                  <span className={itemLabelStyles}>{suggestion.label}</span>
+                  {suggestion.description !== undefined && (
+                    <span className={itemDescriptionStyles}>
+                      {suggestion.description}
+                    </span>
+                  )}
+                </BaseAutocomplete.Item>
+              ))}
+            </BaseAutocomplete.List>
+          </BaseAutocomplete.Popup>
+        </BaseAutocomplete.Positioner>
+      </BaseAutocomplete.Portal>
+    </BaseAutocomplete.Root>
+  );
+};
 
 const inputStyles = css({
   "&::placeholder": { color: "muted" },

package/src/ContextMenu/ContextMenu.tsx

@@ -8,6 +8,7 @@ import type { KeyboardEvent, ReactNode } from "react";
 import { useMemo } from "react";
 import { css } from "../../styled-system/css";
 import type { ExtendProps } from "../extend-props";
+import { usePopupBoundary } from "../PopupBoundary/PopupBoundary";
 
 /** A point in the viewport, in CSS pixels. */
 export type Point = { x: number; y: number };
@@ -29,7 +30,7 @@ type Props = ExtendProps<
  * The caller sets `open` and `at`, and hears it close (a choice, Escape or an
  * outside press) through `onOpenChange`. The press may not be in this
  * document, as with a click in a `<webview>`. The menu takes the keyboard while
- * open.
+ * open. It stays inside its `PopupBoundary`, such as its window.
  *
  * A letter chooses the first enabled item in the open menu or submenu whose
  * mnemonic it is, and opens a submenu. Other letters go to base-ui's
@@ -45,6 +46,7 @@ const ContextMenuComponent = ({ at, children, label, ...rootProps }: Props) => {
     }),
     [at.x, at.y],
   );
+  const { boundary } = usePopupBoundary(false);
   return (
     // The context menu's root, not `Menu.Root`: a `Menu.Root` with no trigger
     // closes when one of its submenus opens.
@@ -54,6 +56,7 @@ const ContextMenuComponent = ({ at, children, label, ...rootProps }: Props) => {
           align="start"
           anchor={anchor}
           className={positionerStyles}
+          collisionBoundary={boundary}
           side="bottom"
           sideOffset={0}
         >
@@ -190,31 +193,37 @@ const Submenu = ({
   label,
   mnemonic,
   ...rootProps
-}: SubmenuProps) => (
-  <BaseMenu.SubmenuRoot {...rootProps}>
-    <BaseMenu.SubmenuTrigger
-      className={itemStyles}
-      data-mnemonic={mnemonicKey(label, mnemonic)}
-      disabled={disabled}
-    >
-      <Label icon={icon} mnemonic={mnemonic}>
-        {label}
-      </Label>
-      <CaretRightIcon className={caretStyles} />
-    </BaseMenu.SubmenuTrigger>
-    <BaseMenu.Portal>
-      <BaseMenu.Positioner className={positionerStyles}>
-        <BaseMenu.Popup
-          aria-label={label}
-          className={popupStyles}
-          onKeyDown={chooseByMnemonic}
+}: SubmenuProps) => {
+  const { boundary } = usePopupBoundary(false);
+  return (
+    <BaseMenu.SubmenuRoot {...rootProps}>
+      <BaseMenu.SubmenuTrigger
+        className={itemStyles}
+        data-mnemonic={mnemonicKey(label, mnemonic)}
+        disabled={disabled}
+      >
+        <Label icon={icon} mnemonic={mnemonic}>
+          {label}
+        </Label>
+        <CaretRightIcon className={caretStyles} />
+      </BaseMenu.SubmenuTrigger>
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner
+          className={positionerStyles}
+          collisionBoundary={boundary}
         >
-          {children}
-        </BaseMenu.Popup>
-      </BaseMenu.Positioner>
-    </BaseMenu.Portal>
-  </BaseMenu.SubmenuRoot>
-);
+          <BaseMenu.Popup
+            aria-label={label}
+            className={popupStyles}
+            onKeyDown={chooseByMnemonic}
+          >
+            {children}
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.SubmenuRoot>
+  );
+};
 
 /** A line between groups of items. */
 const Separator = () => <BaseMenu.Separator className={separatorStyles} />;

package/src/Field/FieldErrorPopover.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 
 import { css } from "../../styled-system/css";
+import { usePopupBoundary } from "../PopupBoundary/PopupBoundary";
 
 type Props = {
   anchor: HTMLElement | undefined;
@@ -23,6 +24,7 @@ export const FieldErrorPopover = ({ anchor, error }: Props) => {
       setShownError(error);
     }
   }, [error]);
+  const { boundary } = usePopupBoundary(false);
   return (
     <BasePopover.Root open={error !== undefined}>
       <BasePopover.Portal>
@@ -34,6 +36,7 @@ export const FieldErrorPopover = ({ anchor, error }: Props) => {
             fallbackAxisSide: "none",
             side: "none",
           }}
+          collisionBoundary={boundary}
           side="right"
           sideOffset={8}
         >

package/src/Popover/Popover.tsx

@@ -6,12 +6,12 @@ import {
   useContext,
   useEffect,
   useRef,
-  useState,
 } from "react";
 import { css, cva } from "../../styled-system/css";
 import { flex } from "../../styled-system/patterns";
 import { useStableRef } from "../_control/useStableRef";
 import type { ExtendProps } from "../extend-props";
+import { usePopupBoundary } from "../PopupBoundary/PopupBoundary";
 import { Tooltip } from "../Tooltip/Tooltip";
 
 export const { createHandle } = BasePopover;
@@ -51,6 +51,8 @@ type Props = ExtendProps<
      */
     keepMounted?: boolean | undefined;
     side?: Side | undefined;
+    /** Let the panel leave its `PopupBoundary`, such as its window, for its screen. */
+    spansWindows?: boolean | undefined;
     title?: ReactNode | undefined;
     /**
      * `overPhoto` is a translucent pill with white text, for panels opened
@@ -72,9 +74,10 @@ type Props = ExtendProps<
  * A non-modal panel anchored to its trigger, for detail the trigger has no
  * room for. Use `ModalDialog` when the user must respond first.
  *
- * Stays on the `<Screen>` region of the trigger that opened it, so on a
- * desktop of several monitors it never spans two. Triggers elsewhere open it
- * through a `handle` from `createHandle()`, as `Popover.Trigger`.
+ * Stays inside its `PopupBoundary`, else on the `<Screen>` region of the
+ * trigger that opened it, so it never spans two windows or two monitors.
+ * Triggers elsewhere open it through a `handle` from `createHandle()`, as
+ * `Popover.Trigger`.
  *
  * Closes on an outside press, Escape, or focus leaving it. The focus check
  * catches presses inside out-of-process frames, which the document can't
@@ -88,6 +91,7 @@ const PopoverComponent = ({
   keepMounted = false,
   onOpenChange,
   side = "bottom",
+  spansWindows = false,
   title,
   tone = "card",
   tooltip,
@@ -99,13 +103,13 @@ const PopoverComponent = ({
   const actions = actionsRef ?? ownActions;
   const [popupRef, setPopupRef] = useStableRef<HTMLDivElement>();
   const [triggerRef, setTriggerRef] = useStableRef<HTMLElement>();
-  const [screen, setScreen] = useState<Element | undefined>(undefined);
+  const { attach, boundary } = usePopupBoundary(spansWindows);
   const attachTrigger = useCallback<RefCallback<HTMLElement>>(
     (element) => {
-      setScreen(element?.closest("[data-screen]") ?? undefined);
+      attach(element);
       return setTriggerRef(element);
     },
-    [setTriggerRef],
+    [attach, setTriggerRef],
   );
   // The trigger that opened it, which may be outside this component.
   const opener = useRef<Element | undefined>(undefined);
@@ -117,7 +121,7 @@ const PopoverComponent = ({
       onOpenChange={(open, details) => {
         if (open && details.trigger !== undefined) {
           opener.current = details.trigger;
-          setScreen(details.trigger.closest("[data-screen]") ?? undefined);
+          attach(details.trigger);
         }
         onOpenChange?.(open, details);
       }}
@@ -135,7 +139,7 @@ const PopoverComponent = ({
         <BasePopover.Positioner
           align={align}
           className={positionerStyles}
-          collisionBoundary={screen}
+          collisionBoundary={boundary}
           onFocus={(event) => {
             within.current = event.nativeEvent;
           }}
@@ -194,7 +198,7 @@ const popupStyles = flex({
   },
   // Clips content to the panel's rounded corners.
   "&[data-flush]": {
-    maxInlineSize: "90vw",
+    maxInlineSize: "min(90vw, var(--available-width))",
     overflow: "hidden",
     paddingBlock: 0,
     paddingInline: 0,
@@ -219,7 +223,7 @@ const popupStyles = flex({
     textShadow: "textOverPhoto",
   },
   "&[data-wide]": {
-    maxInlineSize: "min(30rem, 90vw)",
+    maxInlineSize: "min(30rem, 90vw, var(--available-width))",
   },
   backgroundColor: "card",
   border: "1px solid {colors.border}",
@@ -227,7 +231,8 @@ const popupStyles = flex({
   boxShadow: "lifted",
   color: "foreground",
   direction: "column",
-  maxInlineSize: "min({spacing.88}, 90vw)",
+  // `--available-width` is the room its `PopupBoundary` leaves it.
+  maxInlineSize: "min({spacing.88}, 90vw, var(--available-width))",
   opacity: 1,
   outlineStyle: "none",
   paddingBlock: 3,

package/src/PopupBoundary/PopupBoundary.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode, RefCallback } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
+
+/** A box in page pixels. */
+export type Box = { height: number; width: number; x: number; y: number };
+
+type Props = {
+  /** The box popups inside stay within, such as a window's frame. */
+  box: Box | undefined;
+  children: ReactNode;
+};
+
+/**
+ * Keeps every popup opened inside it within `box`: tooltips, popovers, menus
+ * and lists. A shell wraps each window in one, so a popup never spans two
+ * windows. Outside any, a popup stays on its trigger's `<Screen>` region.
+ *
+ * The innermost one wins. A popup passed `spansWindows` leaves it for its
+ * trigger's screen.
+ */
+export const PopupBoundary = ({ box, children }: Props) => (
+  <Bounds value={box}>{children}</Bounds>
+);
+
+const Bounds = createContext<Box | undefined>(undefined);
+
+/**
+ * Where a popup stays: the nearest `PopupBoundary`, else its trigger's
+ * `<Screen>` region, else the viewport. `spansWindows` skips the
+ * `PopupBoundary`.
+ *
+ * `attach` takes the trigger, from a ref or from whichever trigger opened the
+ * popup.
+ */
+export const usePopupBoundary = (
+  spansWindows: boolean,
+): {
+  attach: (trigger: Element | null) => void;
+  boundary: Box | Element | undefined;
+} => {
+  const box = useContext(Bounds);
+  const [screen, setScreen] = useState<Element | undefined>(undefined);
+  const attach = useCallback<RefCallback<Element>>((trigger) => {
+    setScreen(trigger?.closest("[data-screen]") ?? undefined);
+  }, []);
+  return {
+    attach,
+    boundary: box === undefined || spansWindows ? screen : box,
+  };
+};

package/src/Select/Select.tsx

@@ -9,8 +9,10 @@ import { control } from "../../styled-system/recipes";
 import { controlSizingStyle } from "../_control/controlSizingStyle";
 import { focusControlOnMouseDown } from "../_control/focus";
 import { PrefixIconStack } from "../_control/PrefixIconStack";
+import { useStableRef } from "../_control/useStableRef";
 import { wrapperBase } from "../_control/wrapperBase";
 import type { ExtendProps } from "../extend-props";
+import { usePopupBoundary } from "../PopupBoundary/PopupBoundary";
 
 export { SIZES, type Size } from "../control-sizes";
 
@@ -33,8 +35,7 @@ export type SelectOption<V> = {
 type CommonProps<V> = Partial<ControlVariant> & {
   /**
    * Area the list stays inside, shifting and narrowing to fit. Defaults to
-   * the viewport. On a multi-monitor desktop the viewport spans every
-   * monitor, so a panel passes its own span to keep lists on its monitor.
+   * its `PopupBoundary`, else its `<Screen>` region, as `Popover` does.
    */
   boundary?: Boundary | undefined;
   /**
@@ -97,7 +98,8 @@ export const Select = <V,>({
   >(undefined);
   // The popup anchors to the wrapper, not the trigger, so `--anchor-width`
   // is the visible field's width.
-  const wrapperRef = useRef<HTMLDivElement>(null);
+  const { attach, boundary: around } = usePopupBoundary(false);
+  const [wrapperRef, setWrapperRef] = useStableRef<HTMLDivElement>(attach);
   return (
     <BaseSelect.Root<V>
       defaultValue={defaultValue}
@@ -160,7 +162,7 @@ export const Select = <V,>({
         }
         onClick={openTriggerOnWrapperClick}
         onMouseDown={focusControlOnMouseDown}
-        ref={wrapperRef}
+        ref={setWrapperRef}
         style={controlSizingStyle({ width })}
       >
         <PrefixIconStack prefixIcon={prefixIcon} size={size} />
@@ -184,7 +186,7 @@ export const Select = <V,>({
           alignItemWithTrigger={false}
           anchor={wrapperRef}
           className={positionerStyles}
-          collisionBoundary={boundary}
+          collisionBoundary={boundary ?? around}
           side="bottom"
           sideOffset={6}
         >

package/src/Tooltip/Tooltip.tsx

@@ -1,11 +1,12 @@
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-import type { ReactElement, ReactNode, RefCallback } from "react";
-import { useCallback, useContext, useState } from "react";
+import type { ReactElement, ReactNode } from "react";
+import { useContext } from "react";
 
 import { css } from "../../styled-system/css";
 import type { ExtendProps } from "../extend-props";
 import type { Alignment, Side, Tone } from "../Popover/Popover";
 import { PopoverContainer } from "../Popover/Popover";
+import { usePopupBoundary } from "../PopupBoundary/PopupBoundary";
 
 type Props = ExtendProps<
   typeof BaseTooltip.Root,
@@ -15,6 +16,8 @@ type Props = ExtendProps<
     /** How long the pointer rests on the trigger before it opens, in ms. */
     delay?: number | undefined;
     side?: Side | undefined;
+    /** Let it leave its `PopupBoundary`, such as its window, for its screen. */
+    spansWindows?: boolean | undefined;
     /**
      * `overPhoto` is a translucent pill with white text, for tooltips on a
      * bar drawn over the wallpaper.
@@ -29,31 +32,29 @@ type Props = ExtendProps<
  * is on, its trigger. For detail the trigger has no room for, such as a cut
  * title. Use `Popover` for anything the user acts on.
  *
- * Stays on its trigger's `<Screen>` region, as `Popover` does, and draws in
- * the same container.
+ * Stays inside its `PopupBoundary` or its trigger's `<Screen>` region, as
+ * `Popover` does, and draws in the same container.
  */
 export const Tooltip = ({
   align = "center",
   content,
   delay,
   side = "bottom",
+  spansWindows = false,
   tone = "card",
   trigger,
   ...rootProps
 }: Props) => {
-  const [screen, setScreen] = useState<Element | undefined>(undefined);
-  const attachTrigger = useCallback<RefCallback<HTMLElement>>((element) => {
-    setScreen(element?.closest("[data-screen]") ?? undefined);
-  }, []);
+  const { attach, boundary } = usePopupBoundary(spansWindows);
   const container = useContext(PopoverContainer);
   return (
     <BaseTooltip.Root {...rootProps}>
-      <BaseTooltip.Trigger delay={delay} ref={attachTrigger} render={trigger} />
+      <BaseTooltip.Trigger delay={delay} ref={attach} render={trigger} />
       <BaseTooltip.Portal container={container}>
         <BaseTooltip.Positioner
           align={align}
           className={positionerStyles}
-          collisionBoundary={screen}
+          collisionBoundary={boundary}
           side={side}
           sideOffset={6}
         >
@@ -93,7 +94,8 @@ const popupStyles = css({
   color: "foreground",
   fontSize: "xs",
   lineHeight: "normal",
-  maxInlineSize: "min({spacing.88}, 90vw)",
+  // `--available-width` is the room its `PopupBoundary` leaves it.
+  maxInlineSize: "min({spacing.88}, 90vw, var(--available-width))",
   opacity: 1,
   paddingBlock: 1.5,
   paddingInline: 2.5,