@cosmicdrift/kumiko-renderer-web 0.249.0 → 0.251.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.249.0",
+  "version": "0.251.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.249.0",
-    "@cosmicdrift/kumiko-headless": "0.249.0",
-    "@cosmicdrift/kumiko-renderer": "0.249.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.251.0",
+    "@cosmicdrift/kumiko-headless": "0.251.0",
+    "@cosmicdrift/kumiko-renderer": "0.251.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.249.0"
+    "@cosmicdrift/kumiko-locale-de": "0.251.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/kumiko-screen.test.tsx

@@ -816,6 +816,69 @@ describe("KumikoScreen", () => {
     expect(screen.queryByText("raw fallback — must NOT appear")).toBeNull();
   });
 
+  // fw#2752: navigate rowActions may now carry style="danger" — it renders
+  // red like the writeHandler variant, but does NOT force a confirm dialog
+  // (the target form/screen is itself the confirmation).
+  test("entityList rowActions kind=navigate mit style=danger: rot, aber navigiert sofort ohne Dialog", async () => {
+    const navigateCalls: { screenId: string }[] = [];
+    const memoryNav = {
+      route: { screenId: "task-list" },
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
+      replace: () => undefined,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
+      searchParams: {},
+      setSearchParams: () => undefined,
+    };
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: {
+          rows: [{ id: "r1", title: "Alpha", count: 1, done: false }],
+          nextCursor: null,
+        },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    const screenWithDangerNav: EntityListScreenDefinition = {
+      id: "task-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["title"],
+      rowActions: [
+        {
+          kind: "navigate",
+          id: "terminate",
+          label: "actions.terminate",
+          screen: "task-edit",
+          style: "danger",
+        },
+      ],
+    };
+
+    const { NavProvider } = await import("@cosmicdrift/kumiko-renderer");
+    const user = userEvent.setup();
+    render(
+      <NavProvider value={memoryNav}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [screenWithDangerNav] }}
+            qn="tasks:screen:task-list"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    const button = screen.getByTestId("row-r1-action-terminate");
+    expect(button.className).toContain("text-destructive");
+
+    await user.click(button);
+    await waitFor(() => expect(navigateCalls).toEqual([{ screenId: "task-edit" }]));
+    expect(screen.queryByTestId("row-r1-action-terminate-dialog")).toBeNull();
+  });
+
   // Tier 2.7e-1: rowAction kind="navigate" — Click ruft nav.navigate
   // mit screen-id, ggf. mit URL-Search-Params aus params(row).
   // Reihenfolge ist Teil des Contracts: navigate ZUERST, dann
@@ -1229,6 +1292,65 @@ describe("KumikoScreen", () => {
     expect(navigateCalls).toEqual([{ screenId: "task-edit" }]);
   });
 
+  // fw#2752: same decoupling as the rowAction variant — style="danger" on a
+  // navigate toolbarAction renders the destructive button variant without
+  // forcing a confirm dialog.
+  test("entityList toolbarActions navigate-kind mit style=danger: destructive Button, navigiert sofort ohne Dialog", async () => {
+    const navigateCalls: { screenId: string }[] = [];
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [{ id: "r1", title: "x", count: 0, done: false }], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+    const memoryNav = {
+      route: { screenId: "task-list" },
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
+      replace: () => undefined,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
+      searchParams: {},
+      setSearchParams: () => undefined,
+    };
+    const screenWithToolbar: EntityListScreenDefinition = {
+      id: "task-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["title"],
+      toolbarActions: [
+        {
+          kind: "navigate",
+          id: "terminate-all",
+          label: "actions.terminate-all",
+          screen: "task-edit",
+          style: "danger",
+        },
+      ],
+    };
+
+    const { NavProvider } = await import("@cosmicdrift/kumiko-renderer");
+    const user = userEvent.setup();
+    render(
+      <NavProvider value={memoryNav}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [screenWithToolbar] }}
+            qn="tasks:screen:task-list"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    const button = screen.getByTestId("render-list-toolbar-action-terminate-all");
+    expect(button.getAttribute("data-variant")).toBe("destructive");
+
+    await user.click(button);
+    await waitFor(() => expect(navigateCalls).toEqual([{ screenId: "task-edit" }]));
+    expect(screen.queryByTestId("render-list-toolbar-action-terminate-all-dialog")).toBeNull();
+  });
+
   test("entityList toolbarActions writeHandler-kind: Click → dispatcher.write", async () => {
     const writeCalls: { type: string; payload: unknown }[] = [];
     const dispatcher = makeDispatcher({
@@ -1789,6 +1911,67 @@ describe("KumikoScreen", () => {
     expect(writeCalls[0]?.payload).toEqual({ title: "New Task", priority: 1 });
   });
 
+  // fw#2752: actionForm submitStyle reaches the submit button.
+  test("actionForm submitStyle='danger': submit button renders destructive variant", async () => {
+    const dispatcher = makeDispatcher({
+      write: (async () => ({
+        isSuccess: true,
+        data: { id: "new-id" },
+      })) as unknown as Dispatcher["write"],
+    });
+
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      submitStyle: "danger",
+      fields: {
+        title: { type: "text", required: true },
+        priority: { type: "number", default: 1 },
+      },
+      layout: { sections: [{ title: "Basics", fields: ["title", "priority"] }] },
+    };
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={{ ...schema, screens: [actionScreen] }} qn="tasks:screen:quick-add" />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("render-edit-submit").getAttribute("data-variant")).toBe(
+      "destructive",
+    );
+  });
+
+  // fw#2752: actionForm submitStyle reaches the submit button.
+  test("actionForm ohne submitStyle: submit button renders default variant", async () => {
+    const dispatcher = makeDispatcher({
+      write: (async () => ({
+        isSuccess: true,
+        data: { id: "new-id" },
+      })) as unknown as Dispatcher["write"],
+    });
+
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      fields: {
+        title: { type: "text", required: true },
+        priority: { type: "number", default: 1 },
+      },
+      layout: { sections: [{ title: "Basics", fields: ["title", "priority"] }] },
+    };
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={{ ...schema, screens: [actionScreen] }} qn="tasks:screen:quick-add" />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("render-edit-submit").getAttribute("data-variant")).toBe("default");
+  });
+
   test("actionForm mit redirect auf entityList: nach success → navigate ohne entityId (#2419)", async () => {
     const navigateCalls: NavTarget[] = [];
     const dispatcher = makeDispatcher({

package/src/__tests__/primitives.test.tsx

@@ -1516,10 +1516,15 @@ describe("Form", () => {
     expect(contentContainer.className).not.toContain("max-sm:pb-32");
   });
 
-  // fillHeight (fw#2722): the flex-fill chain RenderEdit opts a lone
-  // relatedList tab into, so its table can scroll inside the tab panel
-  // instead of the whole page stretching to the row count.
-  test("fillHeight: form root and its content container size to h-full/flex-1 min-h-0", () => {
+  // fillHeight (fw#2722, height fw#2778): the flex chain RenderEdit opts a
+  // lone relatedList tab into, so its table can scroll inside the tab panel
+  // instead of the whole page stretching to the row count. The chain caps
+  // at h-full but does NOT flex-1/grow past its content — a short table
+  // must not stretch the card to the bottom of the panel (fw#2778); only
+  // the innermost table wrapper (primitives.test.tsx's DataTable coverage)
+  // keeps flex-1 to actually claim the leftover height once the ancestor
+  // chain is force-shrunk.
+  test("fillHeight: form root caps at h-full/min-h-0, its card sizes to content instead of growing (fw#2778)", () => {
     render(
       <Form onSubmit={() => undefined} testId="form" fillHeight>
         <div>content</div>
@@ -1528,10 +1533,11 @@ describe("Form", () => {
     const form = screen.getByTestId("form");
     expect(form.className).toContain("h-full");
     expect(form.className).toContain("min-h-0");
-    // form > FormScreenShell > card(overflow-hidden) — the card is the
-    // flex-1 min-h-0 child that claims the remaining height below headerRegion.
+    // form > FormScreenShell > card(overflow-hidden) — the card sizes to
+    // its content (no flex-1) and only shrinks (min-h-0) once the chain
+    // above it is itself height-constrained.
     const card = form.firstElementChild?.firstElementChild as HTMLElement;
-    expect(card.className).toContain("flex-1");
+    expect(card.className).not.toContain("flex-1");
     expect(card.className).toContain("min-h-0");
   });
 
@@ -1832,6 +1838,16 @@ describe("Stack", () => {
   });
 });
 
+// Padding utilities of one element, sorted — every screen container must
+// resolve to the same set (fw#2640).
+const paddingClasses = (el: Element | null | undefined): string[] =>
+  (el?.className ?? "")
+    .split(" ")
+    .filter((c) => /^p[xytblr]?-/.test(c))
+    .sort();
+
+const paddingOf = (testId: string): string[] => paddingClasses(screen.getByTestId(testId));
+
 describe("PageSection", () => {
   test("wrappt children mit einheitlichem Padding", () => {
     render(
@@ -1850,12 +1866,6 @@ describe("PageSection", () => {
         <FormScreenShell testId="shell-pad">x</FormScreenShell>
       </>,
     );
-    const paddingOf = (testId: string): string[] =>
-      screen
-        .getByTestId(testId)
-        .className.split(" ")
-        .filter((c) => /^p[xytblr]?-/.test(c))
-        .sort();
     expect(paddingOf("page-pad")).toEqual(["pb-12", "pt-6", "px-6"]);
     expect(paddingOf("page-pad")).toEqual(paddingOf("shell-pad"));
   });
@@ -1881,6 +1891,35 @@ describe("PageSection", () => {
   });
 });
 
+// A list screen has no PageSection/FormScreenShell around it — its screen
+// chrome is DataTable's own outer wrapper, which is why that wrapper had its
+// own inset and list screens ended 24px above the viewport edge instead of
+// 48px (fw#2640).
+describe("DataTable screenPadding", () => {
+  const cols = [{ field: "name", label: "Name", type: "string", sortable: false }] as const;
+  const oneRow = [{ id: "r1", values: { name: "Alice" } }];
+  // table → [data-slot="table-container"] → card frame → padding wrapper.
+  const paddingWrapperOf = (testId: string): Element | null | undefined =>
+    screen.getByTestId(testId).parentElement?.parentElement?.parentElement;
+
+  test("screenPadding: the table's screen chrome matches PageSection and FormScreenShell", () => {
+    render(
+      <>
+        <PageSection testId="page-pad">x</PageSection>
+        <FormScreenShell testId="shell-pad">x</FormScreenShell>
+        <DataTable columns={cols} rows={oneRow} testId="list-table" screenPadding />
+      </>,
+    );
+    expect(paddingClasses(paddingWrapperOf("list-table"))).toEqual(paddingOf("page-pad"));
+    expect(paddingClasses(paddingWrapperOf("list-table"))).toEqual(paddingOf("shell-pad"));
+  });
+
+  test("default: an embedded table keeps its symmetric inset (relatedList unchanged)", () => {
+    render(<DataTable columns={cols} rows={oneRow} testId="embedded-table" />);
+    expect(paddingClasses(paddingWrapperOf("embedded-table"))).toEqual(["p-6"]);
+  });
+});
+
 describe("JsonView", () => {
   test("tokenisiert statt einen flachen String zu rendern — Keys/Strings/Zahlen/Booleans/null bekommen je eigene Klasse", () => {
     render(

package/src/__tests__/render-edit.test.tsx

@@ -102,6 +102,39 @@ describe("RenderEdit", () => {
     expect(screen.queryByTestId("field-notes")).toBeNull();
   });
 
+  // fw#2752: submitVariant carries an actionForm's submitStyle through to the
+  // submit button — "danger" for a destructive handler (terminate, revoke).
+  test("submitVariant='danger' renders the destructive submit button; default stays primary", () => {
+    const { rerender } = render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+          submitVariant="danger"
+        />
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("render-edit-submit").getAttribute("data-variant")).toBe(
+      "destructive",
+    );
+
+    rerender(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("render-edit-submit").getAttribute("data-variant")).toBe("default");
+  });
+
   // A hidden field must not leave an empty grid cell behind — the cell count
   // has to track the visible field count exactly, in both directions.
   test("a hidden field claims no grid cell; toggling visibility adds/removes exactly one cell", () => {

package/src/primitives/__tests__/select-display-request.test.tsx

@@ -10,8 +10,8 @@ import { defaultPrimitives } from "../index";
 
 const { Field, Input } = defaultPrimitives;
 
-// Six options, every label past the 14-char threshold — the heuristic would
-// render a dropdown for these.
+// Six options, past the heuristic's four-option threshold — it would render a
+// dropdown for these.
 const HEURISTIC_REJECTS = [
   "Background Jobs Queue",
   "Inbound Mail Processing",
@@ -21,7 +21,7 @@ const HEURISTIC_REJECTS = [
   "Search Index Rebuild",
 ];
 
-// Three short labels — the heuristic would render the radio group for these.
+// Three options — the heuristic would render the radio group for these.
 const HEURISTIC_ACCEPTS = ["Draft", "Review", "Done"];
 
 function renderSelect(

package/src/primitives/__tests__/select-segmented.test.tsx

@@ -1,7 +1,8 @@
 // Segment control for `kind: "select"` with a small closed option set
 // (edit-existing screenshot feedback): a Status field with 3 short values
-// no longer stretches into a full-width dropdown. Threshold: ≤4 options,
-// each label ≤14 chars — otherwise the unchanged ComboboxInput dropdown.
+// no longer stretches into a full-width dropdown. Threshold: ≤4 options —
+// otherwise the unchanged ComboboxInput dropdown. Label length is explicitly
+// not part of the threshold (#2606).
 
 import { describe, expect, test } from "bun:test";
 import { fireEvent } from "@testing-library/react";
@@ -52,10 +53,10 @@ describe("DefaultInput select → segmented control (edit-existing feedback)", (
     expect(screen.getByTestId("combobox-status")).toBeTruthy();
   });
 
-  test("3 options with one long label (>14 chars) keep the dropdown", () => {
+  test("a long label no longer pushes the field into the dropdown", () => {
     renderSelect(["Draft", "Review", "Published Status"]);
-    expect(screen.queryByRole("radiogroup")).toBeNull();
-    expect(screen.getByTestId("combobox-status")).toBeTruthy();
+    expect(screen.queryByTestId("combobox-status")).toBeNull();
+    expect(screen.getAllByRole("radio")).toHaveLength(3);
   });
 
   test("clicking a segment reports the same value the dropdown's onChange would give", () => {
@@ -82,3 +83,54 @@ describe("DefaultInput select → segmented control (edit-existing feedback)", (
     expect(changes).toEqual([]);
   });
 });
+
+// offlot-app's language picker from #2606: same four option values, the German
+// translations land at 14 chars and the English ones above it.
+const LANGUAGE_OPTIONS_EN = [
+  { value: "", label: "Select a language" },
+  { value: "de", label: "German" },
+  { value: "en", label: "English" },
+  { value: "es", label: "Spanish" },
+];
+
+const LANGUAGE_OPTIONS_DE = [
+  { value: "", label: "Sprache wählen" },
+  { value: "de", label: "Deutsch" },
+  { value: "en", label: "Englisch" },
+  { value: "es", label: "Spanisch" },
+];
+
+function renderedSelectWidget(
+  options: readonly { readonly value: string; readonly label: string }[],
+): "radiogroup" | "combobox" | "neither" {
+  const { container, unmount } = render(
+    <Field id="language" label="Language" testId="field-language">
+      <Input
+        kind="select"
+        id="language"
+        name="language"
+        value=""
+        onChange={() => {}}
+        options={options}
+      />
+    </Field>,
+  );
+  const hasRadioGroup = container.querySelector('[role="radiogroup"]') !== null;
+  const hasCombobox = container.querySelector('[data-testid="combobox-language"]') !== null;
+  unmount();
+  if (hasRadioGroup) return "radiogroup";
+  return hasCombobox ? "combobox" : "neither";
+}
+
+describe("DefaultInput select → widget choice is independent of the UI language", () => {
+  test("translated labels of different lengths pick the same widget", () => {
+    expect(renderedSelectWidget(LANGUAGE_OPTIONS_EN)).toBe(
+      renderedSelectWidget(LANGUAGE_OPTIONS_DE),
+    );
+  });
+
+  test("and that widget is the segmented control both times", () => {
+    expect(renderedSelectWidget(LANGUAGE_OPTIONS_EN)).toBe("radiogroup");
+    expect(renderedSelectWidget(LANGUAGE_OPTIONS_DE)).toBe("radiogroup");
+  });
+});

package/src/primitives/index.tsx

@@ -426,16 +426,14 @@ function withUnitSuffix(unit: string | undefined, input: ReactNode): ReactNode {
 // Default presentation for `kind: "select"` with a small closed option set —
 // a 4-value Status field looked wrong stretched into a full-width dropdown
 // (edit-existing screenshot feedback). Only consulted when the caller states
-// no `display` of its own; an explicit `display` wins (#2711).
+// no `display` of its own; an explicit `display` wins (#2711). The option
+// count is the only criterion: labels arrive already translated, so the former
+// label-length threshold made the widget type depend on the active UI language
+// (#2606). Labels that no longer fit wrap inside the group.
 const SEGMENTED_SELECT_MAX_OPTIONS = 4;
-const SEGMENTED_SELECT_MAX_LABEL_LENGTH = 14;
 
-function isSegmentedSelectEligible(options: readonly { readonly label: string }[]): boolean {
-  return (
-    options.length > 0 &&
-    options.length <= SEGMENTED_SELECT_MAX_OPTIONS &&
-    options.every((o) => o.label.length <= SEGMENTED_SELECT_MAX_LABEL_LENGTH)
-  );
+function isSegmentedSelectEligible(options: readonly unknown[]): boolean {
+  return options.length > 0 && options.length <= SEGMENTED_SELECT_MAX_OPTIONS;
 }
 
 // WAI-ARIA radiogroup pattern (role="radiogroup" + role="radio" children):
@@ -701,7 +699,7 @@ function DefaultInput(props: InputProps): ReactNode {
       );
       // An explicit `display` is an author decision and outranks the
       // heuristic in both directions — a requested radio group renders as
-      // one even when the labels are long or numerous (#2711).
+      // one even when the options outnumber the heuristic's threshold (#2711).
       const wantsRadioGroup =
         props.display === "radio" ||
         (props.display === undefined && isSegmentedSelectEligible(comboOptions));
@@ -906,6 +904,7 @@ function DefaultDataTable({
   getCellTestId,
   chromeless,
   scrollBody,
+  screenPadding,
 }: DataTableProps): ReactNode {
   // One locale/translate subscription per table — not per cell (fw#2345).
   // Optional hooks: a bare DataTable outside LocaleProvider must not crash.
@@ -939,13 +938,16 @@ function DefaultDataTable({
       // sitzt auf derselben Card-Fläche wie Forms; auf Themes mit farbigem
       // Page-Background (z.B. Cream) matchen Listen sonst nicht die Cards.
       // `chromeless` drops that frame for a host with its own boundary already (a tab panel, fw#2722).
-      // `scrollBody` fills the remaining height of its flex-col ancestor
-      // (see DefaultForm/FormScreenShell's `fillHeight` and this table's own
-      // outer wrapper below) and scrolls rows internally, instead of
-      // `overflow-hidden` (document-flow height, grows with row count) — for
-      // a host where a long list must not stretch the whole page (a tab
-      // panel, fw#2722). `min-h-0` overrides flex's default min-height:auto,
-      // which would otherwise let this grow past its flex-1 share to fit content.
+      // `scrollBody` is the terminal link in the DefaultForm/FormScreenShell
+      // `fillHeight` chain (fw#2722) — every ancestor in that chain sizes to
+      // its own content (no flex-1) and only shrinks once the chain's
+      // `h-full` root runs out of room, so THIS is the one div that still
+      // claims the leftover height (`flex-1`) and scrolls rows internally
+      // instead of `overflow-hidden` (document-flow height, grows with row
+      // count) — a short list keeps a content-sized card, a long one scrolls
+      // in place instead of stretching the whole page (fw#2722, fw#2778).
+      // `min-h-0` overrides flex's default min-height:auto, which would
+      // otherwise keep this at its content's height regardless of flex-shrink.
       <div
         className={cn(
           scrollBody === true ? "flex-1 min-h-0 overflow-y-auto" : "overflow-hidden",
@@ -1258,11 +1260,25 @@ function DefaultDataTable({
   // der Tabelle im selben Padding-Block — kein separater bg-Bar, kein Screen-
   // Titel (der steht im Breadcrumb der Shell).
   return (
-    <div className={cn("flex flex-col gap-4 p-6 w-full", scrollBody === true && "flex-1 min-h-0")}>
+    // `screenPadding`: on a list screen this wrapper IS the screen container,
+    // so it takes the same token as FormScreenShell/PageSection instead of its
+    // own inset — a list ends at the same footer distance as a form (fw#2640).
+    <div
+      className={cn(
+        "flex flex-col gap-4 w-full",
+        screenPadding === true ? screenPaddingClassName : "p-6",
+        // No flex-1: this wrapper sizes to its content (toolbar + table) and
+        // only shrinks (min-h-0) once its ancestor chain is itself
+        // height-constrained — the actual scroll surface is tableInner/
+        // cardsInner below, which do keep flex-1 to claim whatever height
+        // that shrink leaves them (fw#2778).
+        scrollBody === true && "min-h-0",
+      )}
+    >
       {hasToolbar && (
         <div
           data-testid={testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar"}
-          className="flex flex-wrap items-center gap-3"
+          className={cn("flex flex-wrap items-center gap-3", scrollBody === true && "shrink-0")}
         >
           {toolbarStart !== undefined && <div className="flex-1 max-w-sm">{toolbarStart}</div>}
           {facetCluster}
@@ -1327,10 +1343,13 @@ function RowActionsCell({
 // Components hatten denselben State-Block dupliziert + parallel zur
 // Confirm-Dialog-Render-Logic — der Hook konsolidiert das.
 //
-// "needsConfirm" Helper kapselt die Regel: explizites confirm ODER
-// style=danger triggert den Dialog, alles andere fired direkt.
+// The rule: an explicit confirm OR style=danger opens the dialog,
+// everything else fires straight through.
+// `confirmRequired` overrides the danger-implies-confirm default (e.g.
+// schema-driven navigate/drawer actions where the target form is itself
+// the confirmation).
 function needsConfirm(action: DataTableRowAction): boolean {
-  return action.confirm !== undefined || action.style === "danger";
+  return action.confirm !== undefined || (action.confirmRequired ?? action.style === "danger");
 }
 
 function useRowActionTrigger(row: ListRowViewModel) {
@@ -2192,17 +2211,27 @@ function DefaultForm({
         {...(fillHeight === true && { fillHeight: true })}
       >
         {headerRegion !== undefined && (
-          <div className="flex flex-col gap-6 mb-8">{headerRegion}</div>
+          <div className={cn("flex flex-col gap-6 mb-8", fillHeight === true && "shrink-0")}>
+            {headerRegion}
+          </div>
         )}
         <div
           className={cn(
             cardSurface(),
             "overflow-hidden",
-            fillHeight === true && "flex-1 min-h-0 flex flex-col",
+            // No flex-1: a fillHeight card sizes to its content (flex's
+            // initial 0 1 auto) and only claims more than that once its
+            // FormScreenShell ancestor is itself height-constrained and
+            // shrinks it back down via min-h-0 — flex-1 would instead force
+            // it to always fill the remaining height, stretching a short
+            // relatedList tab to the bottom of the panel (fw#2778).
+            fillHeight === true && "min-h-0 flex flex-col",
           )}
         >
           {(title !== undefined || subtitle !== undefined) && (
-            <div className={cn(cardHeaderBorder, "px-6 pb-4 pt-5")}>
+            <div
+              className={cn(cardHeaderBorder, "px-6 pb-4 pt-5", fillHeight === true && "shrink-0")}
+            >
               {title !== undefined && (
                 <h2
                   data-testid={testId !== undefined ? `${testId}-title` : undefined}
@@ -2234,7 +2263,10 @@ function DefaultForm({
               // safe-area, fw#2528) — widen further if a wizard step's last field
               // ever renders visibly clipped under three or more wrapped rows.
               stickyActions === true && "max-sm:pb-32",
-              fillHeight === true && "flex-1 min-h-0",
+              // Same "no flex-1" reasoning as the card above: this is the
+              // one section allowed to shrink (min-h-0) inside the card, not
+              // one forced to grow past its content.
+              fillHeight === true && "min-h-0",
             )}
           >
             <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
@@ -2244,6 +2276,7 @@ function DefaultForm({
               className={cn(
                 "flex flex-col-reverse gap-3 px-[var(--card-padding)] py-3 sm:flex-row sm:items-center sm:justify-between sm:py-4",
                 cardFooterBorder,
+                fillHeight === true && "shrink-0",
                 // Below sm (640px): pin to the viewport bottom instead of normal
                 // flow, so a virtual keyboard shrinking the viewport can't push
                 // this out of reach (fw#1918). `fixed` escapes the card's
@@ -2421,8 +2454,12 @@ function DefaultSection({
 }
 
 function DefaultFillContainer({ children, testId }: FillContainerProps): ReactNode {
+  // No flex-1: sizes to its content (the relatedList table) and only
+  // shrinks (min-h-0) once the ancestor FormScreenShell chain is itself
+  // height-constrained — flex-1 would instead always stretch to fill the
+  // remaining tab-panel height, even for a two-row table (fw#2778).
   return (
-    <div data-testid={testId} className="flex flex-1 min-h-0 flex-col">
+    <div data-testid={testId} className="flex min-h-0 flex-col">
       {children}
     </div>
   );