@cosmicdrift/kumiko-renderer-web 0.250.0 → 0.251.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.250.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.250.0",
-    "@cosmicdrift/kumiko-headless": "0.250.0",
-    "@cosmicdrift/kumiko-renderer": "0.250.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.250.0"
+    "@cosmicdrift/kumiko-locale-de": "0.251.0"
   },
   "repository": {
     "type": "git",

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/primitives/index.tsx

@@ -904,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.
@@ -937,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",
@@ -1256,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}
@@ -2193,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}
@@ -2235,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>
@@ -2245,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
@@ -2422,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>
   );