@eifi1/ui-kit 0.32.0 → 0.32.1

package/src/components/data-table.tsx

@@ -35,7 +35,7 @@ import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { FullBleedDialog } from "./full-bleed-dialog";
 import { Popover } from "./popover";
-import { useBreakpoint } from "../hooks/use-breakpoint";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useAnnounce } from "../hooks/use-announce";
 import { DEFAULT_DATA_TABLE_LABELS, resolveDataTableLabels, type DataTableLabels } from "./data-table-labels";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels";
@@ -1655,9 +1655,13 @@ export function DataTable<T>({
     : labels.columnsCount(visibleCount, totalCount);
   // Match the `md:` breakpoint at the text size in force: we render either the table or
   // the card list — never both — so we don't double up DOM nodes that screen readers and
-  // integration tests would have to disambiguate. The same answer as `usePhoneLayout()`
-  // (inverted), which an app's own phone checks use (§10.4).
-  const isMdUp = useBreakpoint("md", true);
+  // integration tests would have to disambiguate. `usePhoneLayout()` itself, not its twin
+  // `useBreakpoint("md")`: the same query an app's own phone checks ask (keksdose's
+  // sticky editor footer), so the card list and the full-screen row dialog switch with
+  // them and never a frame apart (§10.4 "usePhoneLayout() is the single answer"; 0.32.1,
+  // keksdose's 0.32 report, where `md` and `max-md` both missed at 767.5 px). Without
+  // `matchMedia` (SSR, jsdom) it is the table, as before.
+  const isMdUp = !usePhoneLayout();
   // `edgeFade` (0.25) on the desktop scroller; the phone list never scrolls sideways.
   const desktopScroller = useRef<HTMLDivElement | null>(null);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);

package/src/components/date-picker.tsx

@@ -206,6 +206,16 @@ function CustomTrigger({
   return render(attrs, valueId);
 }
 
+/**
+ * The trigger's value wraps instead of truncating at Large and Extra large (0.32.1, the
+ * 360 px Extra-large sweep; docs/text-size-harmonization.md §4 "nothing truncates"). A
+ * range ("01/09/2026 – 30/09/2026") is 312 px at 150 %, and on a 360 px phone it read
+ * "01/09/2026 – 30/…" — its end, the half a reader needs, was the half cut off. It breaks
+ * at its spaces; a single date breaks only where it cannot fit at all. A `large:` class,
+ * so Normal keeps its one-line field.
+ */
+const VALUE_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+
 /**
  * The field-shaped button that opens the calendar.
  *
@@ -320,7 +330,7 @@ function DateFieldTrigger({
 
   return (
     <button {...attrs}>
-      <span id={valueId} className={cn("truncate", !hasValue && "text-[var(--text-placeholder)]")}>
+      <span id={valueId} className={cn("truncate", VALUE_WRAP_AT_LARGE, !hasValue && "text-[var(--text-placeholder)]")}>
         {/* `|| " "` (a NON-BREAKING space) — triggerText is "" when there is no value and no
             placeholder was passed. An empty span has no line box, so the
             trigger collapses to its padding and sits shorter than every
@@ -558,6 +568,23 @@ function DateField({
   );
 }
 
+/**
+ * The ‹ date › (today) row on a phone at Large and Extra large (0.32.1, the 360 px
+ * Extra-large sweep; docs/text-size-harmonization.md §4): the field takes the first line
+ * on its own, whole and with all four corners, and the buttons share the line under it
+ * as one joined strip. Three 2.5rem buttons are 180 px at 150 %, and on a 360 px phone
+ * they left the field 84 px — "Book… 0" for "Booking date 07/09/2026" — where a 360 px
+ * row would hold the date only by cutting it. `large:max-sm:`, the scaled phone width,
+ * so a tablet or a desktop at Large keeps the one row, and Normal is unchanged.
+ */
+const STEP_ROW_STACK_AT_LARGE = cn(
+  "large:max-sm:flex-wrap large:max-sm:gap-y-2",
+  "large:max-sm:[&>[data-slot=date-step-field]]:order-first large:max-sm:[&>[data-slot=date-step-field]]:basis-full",
+  "large:max-sm:[&>[data-slot=date-step-field]]:ms-0 large:max-sm:[&_[role=combobox]]:rounded-md",
+  // The buttons (each in its tooltip's wrapper) share the line under the field.
+  "large:max-sm:[&>span]:flex-1 large:max-sm:[&>span>button]:w-full",
+);
+
 /** One ‹ / › day-step button, sized to sit flush beside the field. */
 function StepButton({
   icon: Icon,
@@ -1105,6 +1132,9 @@ export function DatePicker(props: DatePickerProps) {
       disabled={disabled}
       invalid={messages.isInvalid}
       className={step ? "min-w-0 flex-1" : className}
+      // Named for STEP_ROW_STACK_AT_LARGE; only in the row, so a caller's own
+      // `data-slot` on a bare field is left alone.
+      {...(wrapped ? { "data-slot": "date-step-field" } : {})}
       hasValue={Boolean(value)}
       triggerText={value ? render(value) : (placeholder ?? "")}
       onClear={() => onChange("")}
@@ -1173,6 +1203,7 @@ export function DatePicker(props: DatePickerProps) {
         // the trigger, which raising the trigger alone covered. Hover raises nothing: it
         // changes no border, and would let a hovered › cover a focused field's edge.
         "[&>*:focus-within]:z-20 [&>*:active]:z-20 [&>*:has([aria-invalid=true])]:z-10",
+        STEP_ROW_STACK_AT_LARGE,
         className,
       )}
     >

package/src/components/inline-edit-field.tsx

@@ -155,6 +155,23 @@ function RenderEditor<T>({ render, ...props }: InlineEditorProps<T> & { render:
   return render(props);
 }
 
+/**
+ * The value at Large and Extra large (0.32.1, keksdose's 0.32 report;
+ * docs/text-size-harmonization.md §4 "nothing truncates"): the display button, the
+ * locked one and the read-only text wrap instead of ending in "…", and break a word too
+ * long for the cell, so an IBAN or an e-mail address shows to its last character. The
+ * value IS the button's accessible name and the thing being edited: a reader who needs
+ * big type cannot recover a cut-off end by squinting. A `large:` class, so a table of
+ * these keeps its one-line cells at Normal.
+ *
+ * `break-words`, not `[overflow-wrap:anywhere]`: these live in table cells (keksdose's
+ * budget and invoice lines), and `anywhere` lowers the value's min-content width to one
+ * letter, so an auto-sized column could squeeze an amount to a digit per line. With
+ * `break-word` a column keeps each word whole; the button is `w-full`, so a word wider
+ * than a sized cell still breaks.
+ */
+const VALUE_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+
 /** `onCommit`'s result, if it is a promise. */
 function asPromise(result: unknown): Promise<unknown> | null {
   return result && typeof (result as Promise<unknown>).then === "function" ? (result as Promise<unknown>) : null;
@@ -415,7 +432,7 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
   let body: ReactNode;
   if (readOnly) {
     body = (
-      <span {...private_} className={cn("block min-w-0 truncate", alignClass)}>
+      <span {...private_} className={cn("block min-w-0 truncate", VALUE_WRAP_AT_LARGE, alignClass)}>
         {content}
       </span>
     );
@@ -492,6 +509,7 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
             onClick={(e) => e.preventDefault()}
             className={cn(
               "block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none",
+              VALUE_WRAP_AT_LARGE,
               FOCUS_RING,
               alignClass,
             )}
@@ -516,6 +534,7 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
           onClick={() => setOpen(true)}
           className={cn(
             "block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none",
+            VALUE_WRAP_AT_LARGE,
             FOCUS_RING,
             alignClass,
           )}

package/src/components/month-picker.tsx

@@ -962,7 +962,12 @@ export function MonthPicker(props: MonthPickerProps) {
       </Popover>
     );
     return (
-      <div {...wrapperRest} ref={rootRef} className={cn("flex min-w-0 items-center gap-2", className)}>
+      // `flex-wrap`: where the heading and the buttons do not fit one row, the buttons
+      // take the next line, at the end (0.32.1, the 360 px Extra-large sweep;
+      // docs/text-size-harmonization.md §4). In one row at 150 % "Today ‹ ›" left the
+      // heading 30 px on a 360 px phone, and "October 2026" was drawn under "Today".
+      // Where they fit, nothing changes.
+      <div {...wrapperRest} ref={rootRef} className={cn("flex min-w-0 flex-wrap items-center gap-2", className)}>
         {Heading ? <Heading className="m-0 min-w-0 text-lg font-semibold">{trigger}</Heading> : trigger}
         <div className="ms-auto flex shrink-0 items-center gap-1">
           {showToday && (

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/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. */
@@ -198,81 +216,168 @@ export function RowActions({
       )}
     >
       {(close) => (
-        <ul data-slot="row-actions-menu" className="space-y-0.5">
-          {entries.map((action) => {
-            const glyph = glyphOf(action.icon);
-            return (
+        // React carries an event out of a portal along the COMPONENT tree, so a click on
+        // an entry (or between two) 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 (0.32.1, keksdose's 0.32 report). Stopped
+        // here for the whole panel: clicks, and the Enter / Space a row also listens for.
+        // Escape goes on, to the popover that closes on it.
+        <div role="presentation" onClick={stopClick} onKeyDown={stopActivationKeys}>
+          <ul data-slot="row-actions-menu" className="space-y-0.5">
+            {entries.map((action) => (
               <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>
+                <MenuAction action={action} close={close} />
               </li>
-            );
-          })}
-        </ul>
+            ))}
+          </ul>
+        </div>
       )}
     </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 +395,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,
               )}
             >