@eifi1/ui-kit 0.39.1 → 0.40.0

package/src/components/autocomplete.tsx

@@ -12,6 +12,7 @@ import {
   ComboboxFieldLabel,
   DISABLED_ROW_CLASS,
   endHintRowProps,
+  GROUP_HEADING_STICKY,
   isOptionEnabled,
   stepEnabled,
   SUGGESTION_LIST_CLASS,
@@ -547,7 +548,10 @@ export function Autocomplete<V extends string | number = string>(props: Autocomp
                       {startsGroup && (
                         <li
                           role="presentation"
-                          className="px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1"
+                          className={cn(
+                            GROUP_HEADING_STICKY,
+                            "px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1",
+                          )}
                         >
                           {o.group}
                         </li>

package/src/components/combobox-core.tsx

@@ -51,7 +51,11 @@ export interface ComboOption<V extends string | number> {
    * members indented beneath — {@link InlineEntityCombobox} does — this is a genuine
    * grouping, not decoration: the name appears once per section rather than trailing
    * every row in small grey type, which is barely legible on a phone (feedback #136).
-   * Searchable like `sublabel`.
+   * The heading stays at the top of the list while its rows scroll beneath it.
+   *
+   * NOT searched (0.40, kk run 79): a group is where a row is filed, not what it is
+   * called — with first-letter groups ("A", "B", … "#"), typing "a" matched every row
+   * filed under A. Searching a category's name means putting it in `sublabel`.
    */
   group?: string;
   /**
@@ -463,6 +467,16 @@ export function useComboboxCore<V extends string | number>({
 
 /** The anchored suggestion list's box and rows — one look for {@link Combobox},
  *  {@link InlineEntityCombobox} and {@link Autocomplete}. */
+/**
+ * A group's heading in a picker list stays at the top of the list while its rows scroll
+ * under it (kk run 79 gap 3): with first-letter groups over two hundred payees, the
+ * heading is the one thing that says where in the alphabet the thumb is. Opaque — the
+ * list's own `bg-surface` — so the rows pass beneath it rather than through it. Shared
+ * by every list that heads groups (the panel and the sheet, `Combobox`, `Autocomplete`,
+ * `InlineEntityCombobox`).
+ */
+export const GROUP_HEADING_STICKY = "sticky top-0 z-10 bg-surface";
+
 export const SUGGESTION_LIST_CLASS =
   "max-h-64 overflow-y-auto rounded-md border border-subtle bg-surface py-1 shadow-lg";
 
@@ -964,6 +978,7 @@ export function ComboboxPanel<V extends string | number>({
                   <li
                     role="presentation"
                     className={cn(
+                      GROUP_HEADING_STICKY,
                       "font-semibold uppercase tracking-wide text-muted",
                       isPhone ? "px-4 pb-1 pt-3 text-xs" : "px-3 pb-0.5 pt-2 text-caption first:pt-1",
                     )}
@@ -1009,6 +1024,10 @@ export function ComboboxPanel<V extends string | number>({
         onSearchKeyDown={onKeyDown}
         listboxId={listboxId}
         activeId={activeId}
+        // A multi list stays open as rows are ticked, so the sheet needs a way out
+        // that is not the X in its corner: the kit's sticky "Done" (keksdose #412).
+        // A single pick closes the sheet itself.
+        done={multi}
       >
         {toolbar}
         <div className="relative">

package/src/components/combobox.tsx

@@ -8,7 +8,7 @@ import { takeEscape, useDismissLayer } from "../hooks/use-dismiss";
 import { isImeEnter } from "../lib/ime";
 import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet";
-import { ComboboxFieldLabel, endHintRowProps, useActiveOptionScroll } from "./combobox-core";
+import { ComboboxFieldLabel, endHintRowProps, GROUP_HEADING_STICKY, useActiveOptionScroll } from "./combobox-core";
 import { useKitLocale } from "../i18n/kit-labels";
 import { rankMatch } from "../lib/text-match";
 import {
@@ -574,7 +574,10 @@ export function Combobox(props: ComboboxProps) {
                   {group !== undefined && (
                     <li
                       role="presentation"
-                      className="px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-muted"
+                      className={cn(
+                        GROUP_HEADING_STICKY,
+                        "px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-muted",
+                      )}
                     >
                       {group}
                     </li>
@@ -631,7 +634,10 @@ export function Combobox(props: ComboboxProps) {
                 {group !== undefined && (
                   <li
                     role="presentation"
-                    className="px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1"
+                    className={cn(
+                      GROUP_HEADING_STICKY,
+                      "px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1",
+                    )}
                   >
                     {group}
                   </li>

package/src/components/data-table-labels.ts

@@ -18,6 +18,11 @@ export interface DataTableLabels extends DataTableSortLabels {
   filter: string;
   close: string;
   selectRow: string;
+  /** The phone card list's way into selection mode for a keyboard and a screen reader
+   *  (0.40, #421) — a button, visually hidden until focused; a long press is the touch way in. */
+  selectRows: string;
+  /** Leaves the phone card list's selection mode, clearing the selection (0.40, #421). */
+  cancelSelection: string;
   /**
    * The name of an opening row's disclosure button on desktop — visually hidden, in the
    * row's first cell, carrying `aria-expanded` and `aria-controls` (round 0.34, the
@@ -116,6 +121,8 @@ export const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {
   filter: "Filter",
   close: "Close",
   selectRow: "Select row",
+  selectRows: "Select rows",
+  cancelSelection: "Cancel",
   rowDetails: "Details",
   autoSize: "Auto-size columns",
   loading: "Loading…",

package/src/components/data-table-mobile.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useId, useMemo, useState } from "react";
+import { Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from "lucide-react";
 import { FOCUS_RING } from "./focus-ring";
@@ -12,6 +12,8 @@ import type { SortCycle, SortState } from "./data-table-sort";
 import { FilterPopover } from "./data-table-filter-popover";
 import { SwipeableRow, type SwipeAction } from "./swipeable-row";
 import { DialogFrame } from "./dialog-frame";
+import { Checkbox } from "./checkbox";
+import { useLongPress } from "../hooks/use-long-press";
 import type { DataTableLabels } from "./data-table-labels";
 import { RowLink, cleanAttrs, columnLabel, fromOutside } from "./data-table-shared";
 import type {
@@ -202,6 +204,20 @@ export interface MobileRowProps<T> {
   compact: boolean;
   /** The text size is Large or Extra large (§4). */
   large: boolean;
+  /** Phone selection (0.40, keksdose live #421); null without DataTable's `selection`. */
+  select: MobileRowSelect | null;
+}
+
+/** A phone card's part in DataTable's `selection` (0.40, keksdose live #421). */
+export interface MobileRowSelect {
+  /** The card list is in selection mode: the card shows its box and a tap toggles it. */
+  active: boolean;
+  /** `selection.isSelectable` for this row. */
+  selectable: boolean;
+  selected: boolean;
+  onToggle: (checked: boolean) => void;
+  /** A long press outside the mode: enter it with this row selected. */
+  onLongPress: () => void;
 }
 
 /** One mobile card. Shared by the flat list and the grouped list, so both draw
@@ -224,8 +240,17 @@ export function MobileRow<T>({
   mobileExpandAsDialog,
   compact,
   large,
+  select,
 }: MobileRowProps<T>) {
   const expanded = isExpanded?.(row) ?? false;
+  // Selection mode (#421): the whole card is the row's checkbox — a tap toggles it
+  // instead of opening the row, and the swipe and the long press stand down, so no
+  // gesture means two things at once (keksdose's register list, its feedback #153).
+  const selecting = !!select?.active;
+  // Not on an open card, as in kk's register: its editor and a selection are two modes
+  // fighting over the same row.
+  const pressable = !!select && select.selectable && !selecting && !expanded;
+  const longPress = useLongPress(() => select?.onLongPress(), { enabled: pressable });
   const expansion = expanded ? openedRowContent(row) : null;
   const tint = rowClassName?.(row);
   // Use div+role="button" rather than a real <button> so cells that
@@ -241,9 +266,12 @@ export function MobileRow<T>({
   const opensDetail = interactive && opensRow;
   const swipeActions = swipeActionsFor?.(row);
   const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
-  // An expanded row never swipes: the editor below it owns the horizontal space,
-  // and dragging the header away from its own form reads as a glitch.
-  const swipeEnabled = !!swipe && !expanded;
+  // An OPEN card swipes too (0.40, keksdose live #416, Marcel: "faster than scrolling
+  // down to the buttons"). Only the card's header — the summary line — is inside
+  // SwipeableRow; the opened body below is a sibling, so its fields, sliders and
+  // scrolling never meet the gesture. Until 0.40 an open card silently lost it.
+  // In selection mode a sideways drag would be a second meaning for a selecting touch.
+  const swipeEnabled = !!swipe && !selecting;
   const href = mobileCardLinkable ? rowHref?.(row) : undefined;
   const cardClass = cn(
     "w-full text-start flex items-center",
@@ -264,7 +292,13 @@ export function MobileRow<T>({
     // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press
     // keeps the fill and the squeeze above; an outline on every tap of a long list would
     // be louder than the acknowledgement it replaces.
-    interactive && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING),
+    (interactive || selecting) && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING),
+    selecting && "cursor-pointer",
+    select?.selected && selecting && "bg-brand-soft",
+    // A 500 ms hold would otherwise start a text selection, and iOS's link callout —
+    // which only yields to this CSS. The trade kk made on its register: the card's text
+    // is not selectable on a phone where the table offers selection.
+    select && "select-none [-webkit-touch-callout:none]",
   );
   // The card's content is written once and worn by either tag below. Note that
   // the primary cell is rendered RAW here, never through `linkColumn` — the card
@@ -324,7 +358,7 @@ export function MobileRow<T>({
           </>
         )}
       </div>
-      {opensDetail &&
+      {opensDetail && !selecting &&
         // `aria-hidden`: the row already announces itself as a button with
         // `aria-expanded`, so the icon would only add a second, wordless stop.
         (mobileExpandAsDialog ? (
@@ -344,13 +378,56 @@ export function MobileRow<T>({
         ))}
     </>
   );
-  const body =
-    interactive && href ? (
+  // The long press rides the card itself; the click it leaves behind is swallowed on
+  // the `<li>` below, in the capture phase, before the card (or RowLink) sees it.
+  // Attached whenever the table selects, the hook's `enabled` deciding whether a press
+  // arms: its pointerdown also clears a stale swallow latch, which must happen in the
+  // mode too, or a long press whose click never came would eat the first toggle.
+  const press = select ? longPress.handlers : undefined;
+  const body = selecting ? (
+    // In the mode a card is a toggle — kk's register row: `role="button"` with
+    // `aria-pressed`, the box beside it only a picture of that state (the card is the
+    // one control, so the two can never fight or fire twice).
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- role="button",
+       tabIndex 0 and Enter/Space are all here; the rule cannot follow the conditional role. */
+    <div
+      role={select!.selectable ? "button" : undefined}
+      tabIndex={select!.selectable ? 0 : undefined}
+      aria-pressed={select!.selectable ? select!.selected : undefined}
+      aria-disabled={select!.selectable ? undefined : true}
+      data-card-selecting=""
+      {...press}
+      onClick={(e) => {
+        if (!select!.selectable || fromOutside(e.target, e.currentTarget)) return;
+        select!.onToggle(!select!.selected);
+      }}
+      onKeyDown={(e) => {
+        if (!select!.selectable || e.target !== e.currentTarget) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          select!.onToggle(!select!.selected);
+        }
+      }}
+      className={cardClass}
+    >
+      <Checkbox
+        readOnly
+        tabIndex={-1}
+        aria-hidden
+        checked={select!.selected}
+        disabled={!select!.selectable}
+        className="pointer-events-none shrink-0 self-center"
+        inputClassName="pointer-events-none"
+      />
+      {cardInner}
+    </div>
+  ) : interactive && href ? (
       // A card with a URL of its own is a LINK, not a div wearing role="button"
       // (feedback #451): the phone's long-press "open in new tab" and a screen
       // reader's link semantics both come free, and the fake role goes away.
       <RowLink
         href={href}
+        {...press}
         onActivate={() => onRowClick!(row)}
         aria-expanded={opensRow ? expanded : undefined}
         className={cardClass}
@@ -371,6 +448,7 @@ export function MobileRow<T>({
          only attached when `interactive`, and then so are role="button", tabIndex 0 and the
          Enter/Space handler below; the rule cannot follow the conditional role. */
       <div
+        {...press}
         role={interactive ? "button" : undefined}
         tabIndex={interactive ? 0 : undefined}
         onClick={
@@ -400,7 +478,20 @@ export function MobileRow<T>({
       </div>
     );
   return (
-    <li className={cn(tint)} {...cleanAttrs(rowAttributes?.(row))}>
+    <li
+      className={cn(tint)}
+      {...cleanAttrs(rowAttributes?.(row))}
+      data-selected={selecting && select!.selected ? "" : undefined}
+      onClickCapture={
+        select
+          ? (e) => {
+              if (!longPress.consumeClick()) return;
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          : undefined
+      }
+    >
       {swipeEnabled ? (
         <SwipeableRow enabled left={swipe!.left} right={swipe!.right}>
           {body}
@@ -422,6 +513,99 @@ export function MobileRow<T>({
   );
 }
 
+// ---------- Phone selection bar (0.40, keksdose live #421) ----------
+
+/**
+ * The card list's way into and out of selection mode for a keyboard and a screen
+ * reader — the long press is a touch gesture, and a gesture alone is no path at all.
+ *
+ * Outside the mode it is one button, "Select rows", visually hidden until it takes
+ * focus (SwipeableRow's keyboard buttons, the same rule): the card list keeps the look
+ * kk's register has, where the long press is the way in, and Tab or a screen reader's
+ * cursor still finds it. In the mode it is a visible row: "Select all rows" — the
+ * desktop header's box — and Cancel, which clears the selection and leaves, as the
+ * bulk bar's Clear does. The owner's bulk bar is the owner's, as on desktop: it
+ * appears because the selection is no longer empty.
+ */
+export function MobileSelectBar({
+  active,
+  allSelected,
+  someSelected,
+  compact,
+  labels,
+  onEnter,
+  onToggleAll,
+  onCancel,
+}: {
+  active: boolean;
+  allSelected: boolean;
+  someSelected: boolean;
+  compact: boolean;
+  labels: DataTableLabels;
+  onEnter: () => void;
+  onToggleAll: (checked: boolean) => void;
+  onCancel: () => void;
+}) {
+  // The control that was pressed unmounts with the mode it switched, so focus is
+  // handed across: into the bar's box on the way in, back to the button on the way out.
+  const handOff = useRef(false);
+  const allBox = useRef<HTMLInputElement>(null);
+  const enterButton = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (!handOff.current) return;
+    handOff.current = false;
+    (active ? allBox.current : enterButton.current)?.focus();
+  }, [active]);
+  if (!active)
+    return (
+      <button
+        ref={enterButton}
+        type="button"
+        data-table-mobile-select=""
+        onClick={() => {
+          handOff.current = true;
+          onEnter();
+        }}
+        className={cn(
+          "sr-only rounded-md text-sm font-medium text-secondary",
+          // Padding only once shown: unconditional, it beats sr-only's `padding: 0`
+          // (SwipeableRow's 0.32.1 note).
+          "focus:not-sr-only focus:m-2 focus:inline-flex focus:px-2 focus:py-1",
+          FOCUS_RING,
+        )}
+      >
+        {labels.selectRows}
+      </button>
+    );
+  return (
+    <div
+      data-table-mobile-select=""
+      className={cn(
+        "flex flex-wrap items-center justify-between gap-2 border-b border-subtle",
+        compact ? "px-3 py-1.5" : "px-4 py-2",
+      )}
+    >
+      <Checkbox
+        ref={allBox}
+        label={labels.selectAllRows}
+        checked={allSelected}
+        indeterminate={someSelected && !allSelected}
+        onChange={(e) => onToggleAll(e.target.checked)}
+      />
+      <button
+        type="button"
+        onClick={() => {
+          handOff.current = true;
+          onCancel();
+        }}
+        className={cn("rounded-md px-2 py-1 text-sm text-muted hover:text-secondary", FOCUS_RING)}
+      >
+        {labels.cancelSelection}
+      </button>
+    </div>
+  );
+}
+
 // ---------- Mobile filter sheet ----------
 
 /**

package/src/components/data-table.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
 import { Card } from "./card";
 import { Spinner } from "./spinner";
@@ -14,7 +14,7 @@ import {
   resolveDataTableLabels,
   splitCellProps,
 } from "./data-table-shared";
-import { MobileFilters, MobileRow, MobileSort, StackedFields } from "./data-table-mobile";
+import { MobileFilters, MobileRow, MobileSelectBar, MobileSort, StackedFields } from "./data-table-mobile";
 import { DataTableHead } from "./data-table-head";
 import { ColumnSettingsPanel } from "./data-table-column-settings";
 import { useLargeText } from "../hooks/use-large-text";
@@ -236,10 +236,26 @@ export interface DataTableProps<T> {
   urlSync?: TableUrlSync;
   /**
    * When true, the table fills its parent's height and scrolls INTERNALLY, with the
-   * header pinned — so the page itself doesn't add a second, outer scrollbar. On a
-   * phone the card list is the scroller instead, with the filter button pinned above
-   * it; an unbounded parent simply lets either layout grow to its content. The parent must give it a bounded height (e.g. a flex
-   * column inside the viewport-locked app shell). See feedback #207.
+   * header pinned — so the page itself doesn't add a second, outer scrollbar. The parent
+   * must give it a bounded height (e.g. a flex column inside the viewport-locked app
+   * shell). See feedback #207.
+   *
+   * **The list page** (0.40, docs/page-layout-harmonization.md §1): the root carries
+   * `data-fill-height`, and from `md` up AppShell's `<main>` turns into a flex column
+   * while such a table is inside — the shell's banners keep their height, the page takes
+   * the rest. Wrap every element between `<main>` and the table in `FillHeight` (or merge
+   * `FILL_HEIGHT_CLASS`); nothing else to wire. The body never shrinks below `basis-48`
+   * (12rem, about five rows): on a window too short for that, `<main>` scrolls again.
+   *
+   * **On a phone** the card list becomes the scroller ONLY when its parent really bounds
+   * it — measured, not assumed (0.40, keksdose live #420): the list takes the flex
+   * room it is given, and only when its rows overflow that room does it turn
+   * `overflow-y-auto overscroll-contain`, with the filter button pinned above. Under an
+   * unbounded parent — `AppShell` on a phone, where the DOCUMENT scrolls — it stays in
+   * the page's flow and grows to its content. Until 0.40 it was a scroller either way,
+   * and a scroller with nothing to scroll and `overscroll-contain` swallowed the page's
+   * own scroll: a swipe that started on a card moved nothing. So `fillHeight` is safe
+   * to pass at every width; `fillHeight={useBreakpoint("md")}` is no longer needed.
    *
    * The cure for TWO SCROLLBARS (round 0.34 C14, kastlan feedback 55): the default
    * `maxBodyHeight` scrolls the body inside a page that scrolls too. How a page fills
@@ -263,14 +279,13 @@ export interface DataTableProps<T> {
    *  the cap on a page with anything else on it shows two scrollbars side by side,
    *  and the wheel moves whichever is under the pointer. For a list page whose table
    *  is the point, fill the height instead, from `md` up (a phone scrolls the page
-   *  and its card list as one):
+   *  and its card list as one) — docs/page-layout-harmonization.md §1.2 says which
+   *  pages fill:
    *
-   *  1. the shell's content column becomes a flex column of the main area's height
-   *     when the page asks — kastlan's
-   *     `md:has-[>[data-fill-height]]:flex md:has-[>[data-fill-height]]:h-full md:has-[>[data-fill-height]]:flex-col`;
-   *  2. the page's root asks, and is a flex column that may shrink:
-   *     `data-fill-height` and `md:flex md:min-h-0 md:flex-1 md:flex-col`;
-   *  3. the table takes the rest: `<DataTable fillHeight>`.
+   *  1. `<DataTable fillHeight>`: the table marks itself (`data-fill-height`), and
+   *     AppShell's `<main>` becomes a flex column while it is inside;
+   *  2. each element between `<main>` and the table is a `FillHeight` (the page's
+   *     root, any wrapper on the way), or merges `FILL_HEIGHT_CLASS`.
    *
    *  Only the body then scrolls, under its pinned header, and every other page grows
    *  with its content as before (kastlan e3985c9, its leases list). A short table that
@@ -313,11 +328,23 @@ export interface DataTableProps<T> {
   pageSize?: number;
   onPageSizeChange?: (pageSize: number) => void;
   /**
-   * Opt-in multi-row selection (desktop table only). When provided, a leading
+   * Opt-in multi-row selection. When provided, a leading
    * checkbox column is rendered with a select-all box in the header; the owner
    * holds the selected set and reacts via the callbacks. Rows for which
    * `isSelectable` returns false render no checkbox and are excluded from
    * select-all. See feedback #285 (bulk edit).
+   *
+   * **On a phone** (0.40, keksdose live #421) the cards enter a selection MODE: a long
+   * press on a card (500 ms, keksdose's register gesture) selects it and turns every
+   * card into a toggle with its box showing; a tap then selects or deselects. A
+   * keyboard or screen reader enters through "Select rows" (`labels.selectRows`),
+   * visually hidden until focused; in the mode a bar above the cards holds "Select all
+   * rows" and Cancel (`labels.cancelSelection`). The mode lasts while anything is
+   * selected — the bulk bar's Clear, the last box unticked or Cancel ends it — and swipe
+   * actions rest while it is on. Render the owner's `BulkActionBar` as on desktop; it
+   * appears with the first selected row. With `selection` the cards' text is not
+   * selectable on a phone, and a linked card's long press selects instead of opening
+   * the browser's link menu.
    */
   selection?: {
     isSelectable?: (row: T) => boolean;
@@ -1189,6 +1216,30 @@ export function DataTable<T>({
     if (d !== mobileDir) setMobileDir(d);
   };
 
+  // `fillHeight` on a phone (0.40, keksdose live #420): the card list is a scroller only
+  // while its parent bounds it — its rows overflow the flex room it was given. Under
+  // AppShell's phone layout the DOCUMENT scrolls, the list's room is its own content,
+  // and a scroller there (with `overscroll-contain`) only swallowed the page's scroll.
+  // Measured before paint on every render (rows revealed, filtered, opened), and on a
+  // resize of the list or its parent; one read of two heights.
+  const phoneFill = fillHeight && !isMdUp;
+  const phoneListRef = useRef<HTMLUListElement | null>(null);
+  const [phoneListScrolls, setPhoneListScrolls] = useState(false);
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- every render on purpose: what overflows is the rows, and React bails out on an unchanged boolean
+  useLayoutEffect(() => {
+    const el = phoneListRef.current;
+    if (!phoneFill || !el) return;
+    setPhoneListScrolls(el.scrollHeight > el.clientHeight + 1);
+  });
+  useEffect(() => {
+    const el = phoneListRef.current;
+    if (!phoneFill || !el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setPhoneListScrolls(el.scrollHeight > el.clientHeight + 1));
+    ro.observe(el);
+    if (el.parentElement) ro.observe(el.parentElement);
+    return () => ro.disconnect();
+  }, [phoneFill]);
+
   const { mobileSlice, canRevealMoreMobile, loadMoreRef } = useMobileReveal({
     rows: sorted,
     slice,
@@ -1197,6 +1248,23 @@ export function DataTable<T>({
     unpaged,
     defaultPageSize,
   });
+  // ---- Phone selection mode (0.40, keksdose live #421) ----
+  // The cards had no boxes, so `selection`'s bulk actions were unreachable on a phone.
+  // A long press on a card (kk's register gesture) — or "Select rows", the keyboard's
+  // and screen reader's way — enters the mode: every card shows its box and a tap
+  // toggles it. The mode lasts while anything is selected, so emptying the selection
+  // (the bulk bar's Clear, the last box unticked, Cancel) leaves it, as kk's does.
+  const anySelected =
+    !!selection && (selection.someSelected || (selection.allSelected && slice.length > 0));
+  const [phoneSelectMode, setPhoneSelectMode] = useState(false);
+  const [hadSelection, setHadSelection] = useState(anySelected);
+  if (anySelected !== hadSelection) {
+    // Adjusted while rendering, so the frame the selection empties is already out of
+    // the mode (an effect would paint a frame of boxes first).
+    setHadSelection(anySelected);
+    if (!anySelected) setPhoneSelectMode(false);
+  }
+  const phoneSelecting = !!selection && !isMdUp && (phoneSelectMode || anySelected);
   // ---- Shift+click range selection ---- (data-table-selection.ts; feedback #289,
   // anchored on the row's KEY so a sort, filter or page change cannot move it)
   const { selectionAnchor, rangeClick, canSelect, selectRange } = useRangeSelection({
@@ -1268,6 +1336,24 @@ export function DataTable<T>({
       mobileExpandAsDialog={mobileExpandAsDialog}
       compact={compact}
       large={large}
+      select={
+        selection
+          ? {
+              active: phoneSelecting,
+              selectable: canSelect(row),
+              selected: selection.isSelected(row),
+              onToggle: (checked) => {
+                selectionAnchor.current = rowKey(row);
+                selection.onToggle(row, checked);
+              },
+              onLongPress: () => {
+                setPhoneSelectMode(true);
+                selectionAnchor.current = rowKey(row);
+                if (!selection.isSelected(row)) selection.onToggle(row, true);
+              },
+            }
+          : null
+      }
     />
   );
 
@@ -1299,13 +1385,19 @@ export function DataTable<T>({
       // classes and a table-cell tooltip must portal under test just as it does in the
       // browser (see `CLIPS_ATTRIBUTE`). The bare root clips nothing and is not marked.
       data-clips={frame ? "" : undefined}
+      // The fill's marker (0.40, docs/page-layout-harmonization.md §1.3): AppShell's
+      // `<main>` and every `FillHeight` between it and this table key off it with
+      // `has-[[data-fill-height]]`, so a page asks for the fill by passing the prop.
+      data-fill-height={fillHeight ? "" : undefined}
       className={cn(
         "group/table",
         frame ? "overflow-clip" : "min-w-0",
         // Both layouts, not just the table: the phone card list overflowing a bounded
         // pane drew itself over whatever followed it, and in a viewport-locked shell
-        // the rows below the fold could not be reached at all.
-        fillHeight && "flex flex-1 flex-col min-h-0",
+        // the rows below the fold could not be reached at all. From `md` the minimum is
+        // the content's again (`md:min-h-auto`): the body's floor below then holds the
+        // whole chain up to `<main>`, which scrolls instead of leaving a slit.
+        fillHeight && "flex flex-1 flex-col min-h-0 md:min-h-auto",
         className,
       )}
     >
@@ -1373,14 +1465,33 @@ export function DataTable<T>({
             }}
           />
         )}
+        {selection && (
+          <MobileSelectBar
+            active={phoneSelecting}
+            allSelected={selection.allSelected}
+            someSelected={selection.someSelected}
+            compact={compact}
+            labels={labels}
+            onEnter={() => setPhoneSelectMode(true)}
+            onToggleAll={selection.onToggleAll}
+            onCancel={() => {
+              setPhoneSelectMode(false);
+              if (anySelected) selection.onToggleAll(false);
+            }}
+          />
+        )}
         <ul
+          ref={phoneListRef}
           className={cn(
             "divide-y divide-subtle",
-            // Under `fillHeight` the list is the scroller, as the table body is on a
-            // wide screen: the filter button stays above it and a server pager below.
-            // The endless-scroll sentinel still fires in here — an
-            // IntersectionObserver on the viewport sees through the clipping ancestor.
-            fillHeight && "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+            // Under `fillHeight` the list takes the room its parent gives it, and in a
+            // BOUNDED parent it is the scroller, as the table body is on a wide screen:
+            // the filter button stays above it and a server pager below. Only then —
+            // see `phoneListScrolls` (live #420). The endless-scroll sentinel still
+            // fires in here — an IntersectionObserver on the viewport sees through the
+            // clipping ancestor.
+            fillHeight && "min-h-0 flex-1",
+            fillHeight && phoneListScrolls && "overflow-y-auto overscroll-contain",
             // Same busy treatment as the desktop body; see `isLoading` below.
             isLoading && mobileSlice.length > 0 && "opacity-60 transition-opacity",
           )}
@@ -1490,8 +1601,11 @@ export function DataTable<T>({
       </div>
       )}
       {isMdUp && (
-      <div className={cn("flex", fillHeight && "min-h-0 flex-1")}>
-        <div className={cn("relative min-w-0 flex-1", fillHeight && "flex flex-col min-h-0")}>
+      <div className={cn("flex", fillHeight && "flex-1")}>
+        {/* Under `fillHeight` neither wrapper is `min-h-0`: a flex item's automatic
+            minimum is its content's, and the content's height counts the body at its
+            basis (`basis-48`, below), not at its rows — so the floor carries up. */}
+        <div className={cn("relative min-w-0 flex-1", fillHeight && "flex flex-col")}>
           {/* scrollbar-gutter:stable reserves the vertical-scrollbar space up
               front. Expanding a row adds height, which can bring the scrollbar
               in, which narrows the content box — and in an `auto` table layout
@@ -1502,7 +1616,10 @@ export function DataTable<T>({
             ref={desktopScroller}
             // The scroller: marked for the Tooltip's auto-portal (see the root above).
             data-clips=""
-            className={cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "flex-1 min-h-0")}
+            // Under `fillHeight` the body grows into the room from a 12rem basis (0.40,
+            // §1.3): about five rows is its floor. A window too short for the page's
+            // header and that much body scrolls `<main>` instead (keksdose's review).
+            className={cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "min-h-0 grow basis-48")}
             // `edgeFade`: the mask, `data-overflow` and the focus handling; nothing
             // while off. The height bound is merged over the mask, not replaced by it.
             {...edgeFadeProps}