@eifi1/ui-kit 0.32.0 → 0.32.2

package/src/components/phone-input.tsx

@@ -242,7 +242,12 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function
       role={named ? "group" : undefined}
       aria-label={named ? label : undefined}
     >
-      <div className="flex items-stretch gap-2">
+      {/* On a phone at Large the number takes a line of its own under the country (0.32.1,
+          the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 "nothing
+          truncates"): the 7rem select is 168 px at 150 %, and on a 360 px phone it left
+          the number 82 px — "Ph…" over "021 (". `large:max-sm:`, the scaled phone width,
+          so a wider screen at Large and Normal keep the one row. */}
+      <div className="flex items-stretch gap-2 large:max-sm:flex-wrap">
         <Select
           aria-label={text.countryCode}
           value={country}
@@ -261,7 +266,7 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function
           <option value="other">{text.other}</option>
         </Select>
         {/* Its own flex item, so nothing Input wraps itself in can take the sizing. */}
-        <div className="min-w-0 flex-1">
+        <div className="min-w-0 flex-1 large:max-sm:basis-full">
           <Input
             ref={ref}
             {...rest}

package/src/components/popover.tsx

@@ -110,6 +110,7 @@ export function Popover({
   className,
   style,
   "aria-label": ariaLabel,
+  onKeyDown: onKeyDownProp,
   ...rest
 }: PopoverProps) {
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -169,6 +170,9 @@ export function Popover({
   });
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    // A caller's own handler first (0.32.2: RowActions stops Enter / Space at the panel);
+    // it used to be dropped, overwritten by this one.
+    onKeyDownProp?.(e);
     if (e.key !== "Escape") return;
     // `useEscapeKey` above listens on the document and still covers the case where
     // focus somehow is not in here. This handler is for the case that focus IS, which

package/src/components/row-actions.tsx

@@ -1,5 +1,5 @@
 import { isValidElement } from "react";
-import type { ReactElement, ReactNode } from "react";
+import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
 import { MoreHorizontal } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
@@ -7,6 +7,7 @@ import { useLargeText } from "../hooks/use-large-text";
 import { useKitLabels } from "../i18n/kit-labels";
 import { Popover } from "./popover";
 import { Button, CompactControls, IconButton } from "./ui";
+import { useCommitReason } from "./write-lock";
 import type { IconButtonSize } from "./ui";
 import type { DataTableColumn } from "./data-table";
 
@@ -31,8 +32,25 @@ export interface RowAction {
   key?: string;
   /** The action's name: the inline icon's name and tooltip, the menu entry's words. */
   label: string;
-  /** Runs it. The kit sends nothing — the app opens its confirmation or calls its API. */
-  onSelect: () => void;
+  /**
+   * Runs it. The kit sends nothing — the app opens its confirmation or calls its API.
+   * Optional only beside `href`; an action has one or the other (or both: `onSelect`
+   * then runs as the link is followed).
+   */
+  onSelect?: () => void;
+  /**
+   * The action NAVIGATES — an edit page, a mail to compose (0.32.1, kastlan's 0.32
+   * report): a real link inline and in the menu, so open in a new tab, a middle click
+   * and the URL on hover work, which `onSelect` + `navigate` lost. The kit's link rule
+   * applies ({@link Button}'s `href`): in-app through the provider's `linkComponent`, an
+   * external or `#anchor` one a plain `<a>`, `mailto:` included.
+   *
+   * A link cannot carry a reason or a spinner, so an action with a `disabledReason`
+   * (or under a write lock, with `commit`) or `pending` stays a button and says why.
+   */
+  href?: string;
+  /** With `href`: leaves the app — a new tab, and a screen reader is told so. */
+  external?: boolean;
   /**
    * The glyph: a Lucide icon (`Pencil`), or an element (`<Pencil />`, an app's own
    * svg) — DataTable's `rowActions` hand their `icon` node through. Inline, an action
@@ -104,8 +122,8 @@ export type RowActionsSize = Extract<IconButtonSize, "md" | "sm" | "xs" | "2xs">
 export interface RowActionsProps {
   actions: RowActionList;
   /** The row's name, for the menu button's name — "Actions for Ada Example". Without it
-   *  the button is "Actions". */
-  name?: string;
+   *  (or `null`, as API fields often are) the button is "Actions". */
+  name?: string | null;
   /** When the actions collapse into the menu — see {@link RowActionsCollapse}. */
   collapse?: RowActionsCollapse;
   /** The inline icons' and the "⋯" button's size. Default `xs`, a list row's action. */
@@ -196,83 +214,171 @@ export function RowActions({
           <MoreHorizontal />
         </IconButton>
       )}
+      // React carries an event out of a portal along the COMPONENT tree, so a click in
+      // the menu reached a clickable row or a DataTable `onRowClick` the menu was opened
+      // from, though the panel is nowhere near it in the page — only the "⋯" trigger
+      // stopped its own (keksdose's 0.32 report). Stopped on the PANEL itself, its padding
+      // and border included (0.32.2: 0.32.1 stopped it on an inner box, and a click on
+      // the panel's `p-1` still went through): clicks, and the Enter / Space a row also
+      // listens for. Escape goes on, to the popover's own handler that closes it.
+      onClick={stopClick}
+      onKeyDown={stopActivationKeys}
     >
       {(close) => (
         <ul data-slot="row-actions-menu" className="space-y-0.5">
-          {entries.map((action) => {
-            const glyph = glyphOf(action.icon);
-            return (
-              <li key={action.key ?? action.label}>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  stretch
-                  tone={action.tone === "danger" ? "danger" : undefined}
-                  disabledReason={action.disabledReason}
-                  commit={action.commit}
-                  pending={action.pending}
-                  disabled={action.disabled}
-                  className="w-full justify-start text-start"
-                  onClick={() => {
-                    close();
-                    action.onSelect();
-                  }}
-                >
-                  {glyph && (
-                    <span aria-hidden className="flex shrink-0 [&_svg]:size-4">
-                      {glyph}
-                    </span>
-                  )}
-                  {action.label}
-                </Button>
-              </li>
-            );
-          })}
+          {entries.map((action) => (
+            <li key={action.key ?? action.label}>
+              <MenuAction action={action} close={close} />
+            </li>
+          ))}
         </ul>
       )}
     </Popover>
   );
 }
 
-/** One inline action: an IconButton with its icon, else a small text button. */
+function stopClick(e: MouseEvent) {
+  e.stopPropagation();
+}
+
+function stopActivationKeys(e: KeyboardEvent) {
+  if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+}
+
+/**
+ * The `href` an action renders as a link with, or `undefined` for a button: a link
+ * cannot carry a reason or a spinner (Button's link form has neither), so a refused
+ * action — its own `disabledReason`, or a write lock on a `commit` — and a pending one
+ * stay buttons and say so.
+ */
+function useActionHref(action: RowAction): string | undefined {
+  const reason = useCommitReason(action.commit, action.disabledReason);
+  const refused = reason !== undefined && reason !== null && reason !== false && reason !== "";
+  return action.href !== undefined && !action.pending && !refused ? action.href : undefined;
+}
+
+/** One entry of the "⋯" menu: the words, as a link for an `href`, else a button. */
+function MenuAction({ action, close }: { action: RowAction; close: () => void }) {
+  const href = useActionHref(action);
+  const glyph = glyphOf(action.icon);
+  const words = (
+    <>
+      {glyph && (
+        <span aria-hidden className="flex shrink-0 [&_svg]:size-4">
+          {glyph}
+        </span>
+      )}
+      {action.label}
+    </>
+  );
+  const tone = action.tone === "danger" ? "danger" : undefined;
+  const select = () => {
+    close();
+    action.onSelect?.();
+  };
+  if (href !== undefined) {
+    return (
+      <Button
+        href={href}
+        external={action.external}
+        variant="ghost"
+        size="sm"
+        stretch
+        tone={tone}
+        disabled={action.disabled}
+        className="w-full justify-start text-start"
+        onClick={select}
+      >
+        {words}
+      </Button>
+    );
+  }
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      stretch
+      tone={tone}
+      disabledReason={action.disabledReason}
+      commit={action.commit}
+      pending={action.pending}
+      disabled={action.disabled}
+      className="w-full justify-start text-start"
+      onClick={select}
+    >
+      {words}
+    </Button>
+  );
+}
+
+/** One inline action: an IconButton with its icon, else a small text button — each a
+ *  link for an `href` (see {@link useActionHref}). */
 function InlineAction({ action, size }: { action: RowAction; size: RowActionsSize }) {
+  const href = useActionHref(action);
   const glyph = glyphOf(action.icon);
+  const tone = action.tone === "danger" ? "danger" : undefined;
   if (glyph) {
+    if (href !== undefined) {
+      return (
+        <IconButton
+          href={href}
+          external={action.external}
+          size={size}
+          label={action.label}
+          tone={tone}
+          disabled={action.disabled}
+          stopPropagation
+          onClick={() => action.onSelect?.()}
+        >
+          {glyph}
+        </IconButton>
+      );
+    }
     return (
       <IconButton
         size={size}
         label={action.label}
-        tone={action.tone === "danger" ? "danger" : undefined}
+        tone={tone}
         disabledReason={action.disabledReason}
         commit={action.commit}
         pending={action.pending}
         disabled={action.disabled}
         stopPropagation
-        onClick={action.onSelect}
+        onClick={() => action.onSelect?.()}
       >
         {glyph}
       </IconButton>
     );
   }
+  // A row listening for clicks must not open as well (IconButton's stopPropagation).
+  const stop = {
+    onClick: (e: MouseEvent) => {
+      e.stopPropagation();
+      action.onSelect?.();
+    },
+    onKeyDown: (e: KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+    },
+  };
+  if (href !== undefined) {
+    return (
+      <Button href={href} external={action.external} variant="ghost" size="sm" tone={tone} disabled={action.disabled} {...stop}>
+        {action.label}
+      </Button>
+    );
+  }
   return (
     <Button
       type="button"
       variant="ghost"
       size="sm"
-      tone={action.tone === "danger" ? "danger" : undefined}
+      tone={tone}
       disabledReason={action.disabledReason}
       commit={action.commit}
       pending={action.pending}
       disabled={action.disabled}
-      onClick={(e) => {
-        // A row listening for clicks must not open as well (IconButton's stopPropagation).
-        e.stopPropagation();
-        action.onSelect();
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") e.stopPropagation();
-      }}
+      {...stop}
     >
       {action.label}
     </Button>
@@ -290,8 +396,9 @@ export interface RowActionsColumnOptions<T> {
   key?: string;
   /** The row's actions — `false` / `null` for the ones a condition leaves out. */
   actions: (row: T) => RowActionList;
-  /** The row's name, for the "⋯" button's name ("Actions for Ada Example"). */
-  name?: (row: T) => string | undefined;
+  /** The row's name, for the "⋯" button's name ("Actions for Ada Example"). `null` and
+   *  `undefined` both mean "Actions". */
+  name?: (row: T) => string | null | undefined;
   collapse?: RowActionsCollapse;
   /** Default `xs`. */
   size?: RowActionsSize;

package/src/components/settings-fields.tsx

@@ -45,8 +45,12 @@ export interface ThemeSettingProps
  * one segmented control instead of a select — system, light and dark side by side, the
  * choice visible without opening anything, in every app (keksdose offered light and dark
  * only; its store already knew "system"). A {@link ToggleGroup}'s props pass through —
- * `labelPlacement`, `disabledReason`, `commit`, `size` — minus the options and the value,
- * which this owns.
+ * `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the options
+ * and the value, which this owns.
+ *
+ * The options wrap rather than truncate (`overflow="wrap"`), as in its two siblings
+ * {@link TextSizeSetting} and {@link ContrastSetting} (0.32.1, Kurvenschmiede's 0.32
+ * report: "Syst… Li… D…" in a card at Extra large on a 360 px phone).
  *
  * Bind it to the PREFERENCE (`"system"` included), never to the resolved mode: on a
  * system-dark device a control bound to the mode shows "dark" and cannot say "follow the
@@ -70,10 +74,11 @@ export interface ThemeSettingToggleProps
 
 export function ThemeSetting(props: ThemeSettingProps | ThemeSettingToggleProps) {
   if (props.variant === "toggle") {
-    const { variant: _variant, value, onChange, label, optionLabels, ...rest } = props;
+    const { variant: _variant, value, onChange, label, optionLabels, overflow = "wrap", ...rest } = props;
     return (
       <ToggleGroup<ThemePreference>
         {...rest}
+        overflow={overflow}
         label={label}
         value={value}
         onChange={onChange}

package/src/components/share-card.tsx

@@ -20,6 +20,7 @@ import { Tooltip } from "./tooltip";
 import { Button, Card, IconButton, Spinner } from "./ui";
 import { useWriteLock } from "./write-lock";
 import type { CardProps } from "./ui";
+import type { DisabledReasonDisplay } from "./field-parts";
 
 /**
  * Who holds one record, and the owner's every way of changing that — Kurvenschmiede's
@@ -224,6 +225,16 @@ function ShareRoleChip({ role }: { role: ShareRole | undefined }) {
   return role.description ? <Tooltip label={role.description}>{chip}</Tooltip> : chip;
 }
 
+/**
+ * A row's controls: the role toggle and the remove icon, or a pending grant's copy and
+ * revoke. Held to the row and wrapping inside it (0.32.1, the 360 px Extra-large sweep;
+ * docs/text-size-harmonization.md §4 "nothing overflows"): under a write lock on a touch
+ * screen or at Large the remove icon gives its reason as a line under it, up to 20rem
+ * wide, and a `shrink-0` box ran 31 px past a 390 px phone at Normal and 269 px past a
+ * 360 px one at Extra large. Where the controls fit in one row, nothing changes.
+ */
+const ROW_CONTROLS = "ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-1";
+
 /**
  * A row's role choice saves on change, so it is a commit that cannot take `commit`:
  * under a write lock it is disabled, and the lock's reason is put in the kit Tooltip
@@ -278,6 +289,12 @@ export function SharePanel({
   const roleOf = (key: string | undefined) => roles.find((r) => r.key === key);
   const choosable = roles.length > 1;
   const canAdd = !readOnly && onAdd !== undefined;
+  // Under a write lock the form's Share button gives the lock's sentence as a line (on
+  // touch and at Large). A row's remove or revoke icon then keeps it in its tooltip, as
+  // the role toggle beside it does, rather than repeat the same line under every row
+  // (0.32.1, the 360 px Extra-large sweep). Without the form the rows' lines are the
+  // only place it is said, so they stay — and ROW_CONTROLS wraps them.
+  const rowReason: DisabledReasonDisplay = canAdd ? "tooltip" : "auto";
 
   const run = async (key: string, action: () => MaybePromise): Promise<boolean> => {
     setBusy(key);
@@ -457,7 +474,7 @@ export function SharePanel({
                       )}
                     </div>
                     {(changeable || (editable && onRemove)) && (
-                      <div className="ms-auto flex shrink-0 items-center gap-1">
+                      <div className={ROW_CONTROLS}>
                         {changeable && (
                           <LockedRoleChoice reason={lock.locked ? lock.reason : undefined}>
                             <ToggleGroup<string>
@@ -484,6 +501,7 @@ export function SharePanel({
                             // spinner and the write lock, which a "⋯" menu entry
                             // cannot, and its confirmation names the action in words.
                             labelVisible={false}
+                            disabledReasonDisplay={rowReason}
                             pending={busy === key}
                             disabled={busy !== null}
                             onClick={async () => {
@@ -529,7 +547,7 @@ export function SharePanel({
                       </div>
                     </div>
                     {(p.link || (!readOnly && onRevokePending)) && (
-                      <div className="ms-auto flex shrink-0 items-center gap-1">
+                      <div className={ROW_CONTROLS}>
                         {p.link && <CopyButton size="xs" tone="muted" text={p.link} label={labels.copyLink} />}
                         {!readOnly && onRevokePending && (
                           <IconButton
@@ -541,6 +559,7 @@ export function SharePanel({
                             // copy icon (which is an icon at every size), and the
                             // confirmation says it in words.
                             labelVisible={false}
+                            disabledReasonDisplay={rowReason}
                             pending={busy === key}
                             disabled={busy !== null}
                             onClick={async () => {

package/src/components/status-dot.tsx

@@ -66,6 +66,28 @@ export function statusDotColor(tone: StatusDotTone): string {
 
 const SIZE: Record<StatusDotSize, string> = { sm: "size-2", md: "size-2.5", lg: "size-3" };
 
+/**
+ * A labelled dot at Large and Extra large (0.32.1, keksdose's 0.32 report;
+ * docs/text-size-harmonization.md §4 "nothing truncates"): the label wraps instead of
+ * ending in "…", so a legend entry or a status keeps its last word, the one that tells
+ * two states apart. The dot then sits on the label's FIRST line rather than halfway down
+ * the block: the row aligns to the top and the dot moves down by half of what one line
+ * (`1lh`, the label's own line height, which the dot inherits) leaves around it.
+ * `large:` classes, so Normal keeps its one centred line.
+ *
+ * `break-words`, not `[overflow-wrap:anywhere]`: a legend often sits in a table, and
+ * `anywhere` lowers the label's min-content width to one letter, so an auto-sized column
+ * squeezed it to a letter per line (the showcase's tone table at 360 px, Extra large).
+ * `break-word` keeps each word whole wherever the width is the content's to choose, and
+ * still breaks one that cannot fit its line at all.
+ */
+const LABEL_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+const DOT_ON_FIRST_LINE: Record<StatusDotSize, string> = {
+  sm: "large:mt-[calc((1lh_-_0.5rem)/2)]",
+  md: "large:mt-[calc((1lh_-_0.625rem)/2)]",
+  lg: "large:mt-[calc((1lh_-_0.75rem)/2)]",
+};
+
 export interface StatusDotProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
   tone?: StatusDotTone;
   size?: StatusDotSize;
@@ -116,6 +138,7 @@ export function StatusDot({
         SIZE[size],
         FILL[tone],
         ring && "ring-2 ring-[var(--bg-surface)]",
+        label != null && DOT_ON_FIRST_LINE[size],
         label == null && className,
         dotClassName,
       )}
@@ -130,9 +153,9 @@ export function StatusDot({
   return (
     // No `aria-label` here: the visible label is the text, and a name on a role-less
     // span is one ARIA forbids and screen readers ignore.
-    <span {...rest} className={cn("inline-flex min-w-0 items-center gap-1.5 text-sm", className)}>
+    <span {...rest} className={cn("inline-flex min-w-0 items-center gap-1.5 text-sm large:items-start", className)}>
       {dot}
-      <span className="min-w-0 truncate">{label}</span>
+      <span className={cn("min-w-0 truncate", LABEL_WRAP_AT_LARGE)}>{label}</span>
     </span>
   );
 }

package/src/components/swipeable-row.tsx

@@ -269,8 +269,15 @@ export function SwipeableRow({
               type="button"
               onClick={action.onCommit}
               className={cn(
-                "sr-only whitespace-nowrap rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-sm",
+                "sr-only whitespace-nowrap rounded-md border-[var(--border)] bg-[var(--bg-surface)] text-xs font-medium text-[var(--text-primary)] shadow-sm",
                 "focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5",
+                // The box's padding and border only once it shows (0.32.1, keksdose's
+                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s
+                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px
+                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running
+                // past the row's end from the strip's start — invisible under its clip,
+                // but counted in the page's scroll width (§4: nothing overflows).
+                "focus:border focus:px-2 focus:py-1",
                 FOCUS_RING,
               )}
             >

package/src/components/toggle-group.tsx

@@ -9,6 +9,7 @@ import {
   DISABLED_REASON_LINE_CLASS,
   FIELD_CAPTION_CLASS,
   hasContent,
+  isTextHint,
   LabelStrip,
   useDisabledReasonLine,
   useInlineHint,
@@ -130,8 +131,15 @@ export interface ToggleGroupBaseProps<T extends string>
    * two stack and both keep their corners.
    */
   chromeClassName?: string;
-  /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with
-   *  `label`. */
+  /**
+   * As on a labelled {@link Select}: a {@link FieldHint} "?" on the label line, and plain
+   * text (a string) as a caption under the group. Only with `label`.
+   *
+   * 0.32.1 (keksdose's 0.32 report): text went on the label line in every placement, so
+   * `TextSizeSetting`'s hint with `labelPlacement="above"` sat beside the label in body
+   * type, and at Extra large became a column one word wide — on the setting a reader who
+   * needs large text opens first. The label line holds the "?" only (`isTextHint`).
+   */
   hint?: ReactNode;
   /** The message under the field when it is wrong: paints the field's border with
    *  `--danger`, marks the group `aria-invalid` and describes it with the message, as
@@ -196,9 +204,9 @@ const CHROME_PAD: Record<"sm" | "md", string> = { md: "pt-5 pb-0.5", sm: "pt-5 p
 const CHROME_SEGMENT: Record<"sm" | "md", string> = { md: "py-0 leading-[1.125rem]", sm: "py-0 leading-4" };
 
 /**
- * A field of four or more options at Large and Extra large (0.32,
+ * A group at Large and Extra large (0.32,
  * docs/text-size-harmonization.md §4 "nothing truncates", §3.3): the segments flow onto a
- * second row inside the field's frame instead of overflowing it. At 125 % a 390 px phone
+ * second row inside the group's frame instead of overflowing it. At 125 % a 390 px phone
  * is 312 px of Normal type, and "Month / Quarter / Half-year / Year" in one row of the
  * field ran 7 px past it: a one-row flex group is as wide as all its labels end to end
  * when a grid or a stretched column asks how small it can get, however its segments
@@ -212,12 +220,16 @@ const CHROME_SEGMENT: Record<"sm" | "md", string> = { md: "py-0 leading-[1.125re
  * Only where it has to: `flex-wrap` breaks a row only when the segments do not fit, so
  * a wide field at Large stays one row, and a segment shares out what its row leaves
  * (`flex-1`); a label wider than the whole row still truncates as the last resort.
- * Three or fewer options keep one row: each holds a third of the field. A `large:`
- * class, so it costs no render and is right on the first paint. `overflow="wrap"` wraps
- * at every size already; outside the field the group keeps its `overflow`.
+ * A `large:` class, so it costs no render and is right on the first paint.
+ * `overflow="wrap"` wraps at every size already.
+ *
+ * 0.32.1 (Kurvenschmiede's 0.32 report): every count and every placement but the
+ * strip, not only a field of four or more. Since a row breaks only where its labels do
+ * not fit, a wrap only ever replaces a truncation — and three options in a card at
+ * Extra large on a 360 px phone read "Syst… Li… D…". The strip keeps one row: its
+ * 26 px group is what lines it up with the 42 px fields beside it (`STRIP_SEGMENT`).
  */
 const WRAP_AT_LARGE = "large:flex-wrap";
-const WRAP_AT_LARGE_FROM = 4;
 
 /**
  * The strip placement's segments: a 26px group (1 + 2 + 20 + 2 + 1) under the 16px
@@ -335,9 +347,10 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   const locked = hasContent(disabledReason);
   // §4: at Large and on touch the reason is a line under the group, not a bubble.
   const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;
-  // §4: likewise a FieldHint "?" on the label line becomes a caption under the group.
+  // §4: likewise a FieldHint "?" on the label line becomes a caption under the group at
+  // Large and on touch; text is a caption at every size, as Select's (see `hint`).
   const inlineHint = useInlineHint(hint);
-  const hintAsCaption = inlineHint !== hint ? inlineHint : undefined;
+  const hintAsCaption = isTextHint(hint) ? hint : inlineHint !== hint ? inlineHint : undefined;
   const labelHint = hintAsCaption === undefined ? hint : undefined;
   // Locked looks disabled — the dimmed group, the not-allowed cursor, no hover offer —
   // but stays focusable; `disabled` alone also takes the segments out of the tab order.
@@ -346,10 +359,11 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   // `field` is the chrome; a label placed above or in a strip keeps the bare group's
   // own box.
   const field = labelled && labelPlacement === "field";
-  // At Large and Extra large a FIELD of four or more options wraps (see WRAP_AT_LARGE).
-  const wrapAtLarge = field && overflow === "truncate" && options.length >= WRAP_AT_LARGE_FROM;
   const above = labelled && labelPlacement === "above";
   const strip = labelled && labelPlacement === "strip";
+  // At Large and Extra large a truncating group wraps instead, the strip excepted (see
+  // WRAP_AT_LARGE).
+  const wrapAtLarge = overflow === "truncate" && !strip;
   const hasError = labelled && hasContent(error);
   // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is
   // what lets the `onChange` below be called with `null` only in the mode that allows it.

package/src/components/translation-review-editor.tsx

@@ -150,7 +150,7 @@ export function TranslationReviewEditor({
     <div className={cn("min-w-0 space-y-3 text-sm", className)}>
       <code className="block break-all text-xs text-[var(--text-muted)]">{row.key}</code>
 
-      <div className="grid gap-3 md:grid-cols-2">
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
         <div className="min-w-0">
           <SectionLabel as="span" size="xs">
             {referenceLabel}

package/src/components/translation-review.tsx

@@ -2,7 +2,7 @@ import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { Check, ListChecks, PencilLine, RotateCcw } from "lucide-react";
 
-import { useBreakpoint } from "../hooks/use-breakpoint";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import {
@@ -458,9 +458,10 @@ export function TranslationReviewPanel({
   const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
   const locale = useKitLocale();
   const lock = useWriteLock();
-  // The wide screen's breakpoint — the one DataTable switches its layout on, so "a phone"
-  // means the same here as in the table, at every text size.
-  const phone = !useBreakpoint("md", true);
+  // The phone layout DataTable switches its layout on, so "a phone" means the same here
+  // as in the table, at every text size: `usePhoneLayout()` itself (§10.4; 0.32.1,
+  // keksdose's 0.32 report — `!useBreakpoint("md")` could disagree with it at 767.5 px).
+  const phone = usePhoneLayout();
   const baseId = useId();
   const rootRef = useRef<HTMLDivElement>(null);
   const editable = !readOnly && onSave !== undefined;