@cosmicdrift/kumiko-renderer-web 0.229.0 → 0.230.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.229.0",
+  "version": "0.230.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.229.0",
-    "@cosmicdrift/kumiko-headless": "0.229.0",
-    "@cosmicdrift/kumiko-renderer": "0.229.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.230.0",
+    "@cosmicdrift/kumiko-headless": "0.230.0",
+    "@cosmicdrift/kumiko-renderer": "0.230.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.229.0"
+    "@cosmicdrift/kumiko-locale-de": "0.230.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/primitives.test.tsx

@@ -1203,8 +1203,9 @@ describe("Form", () => {
     );
     const actionsFooter = screen.getByTestId("form-actions");
     expect(actionsFooter.className).toContain("max-sm:fixed");
+    expect(actionsFooter.className).toContain("flex-wrap");
     const contentContainer = actionsFooter.previousElementSibling as HTMLElement;
-    expect(contentContainer.className).toContain("max-sm:pb-24");
+    expect(contentContainer.className).toContain("max-sm:pb-32");
   });
 
   test("ohne stickyActions: Footer bleibt im normalen Dokumentfluss", () => {
@@ -1215,8 +1216,12 @@ describe("Form", () => {
     );
     const actionsFooter = screen.getByTestId("form-actions");
     expect(actionsFooter.className).not.toContain("max-sm:fixed");
+    // Shared cardFooter constant — this asserts the wrap fix (fw#2528) on the
+    // plain (non-sticky) footer, which also covers Section/Card since they
+    // render the same constant.
+    expect(actionsFooter.className).toContain("flex-wrap");
     const contentContainer = actionsFooter.previousElementSibling as HTMLElement;
-    expect(contentContainer.className).not.toContain("max-sm:pb-24");
+    expect(contentContainer.className).not.toContain("max-sm:pb-32");
   });
 });
 

package/src/layout/fill-classes.ts

@@ -1,8 +1,15 @@
 // Shared `fill`-prop wiring for the sidebar-based app shells
 // (DefaultAppShell, WorkspaceShell) — both wrap the same vendored
 // shadcn sidebar and need identical viewport-fit classes.
+//
+// min-w-0 on the inset is unconditional (not fill-gated): vendored
+// SidebarInset is `flex-1` with no min-width override, so a flex row child
+// never shrinks below its content's intrinsic width by default. Wide screen
+// content (e.g. a table with many columns) then grows the inset — and with
+// it the whole sidebar row and the page — past the viewport instead of
+// scrolling inside the inset's own `main` (which already has overflow-auto).
 export const fillClasses = (fill?: boolean) => ({
   provider: fill === true ? { className: "h-svh" } : {},
-  inset: fill === true ? "min-h-0" : undefined,
+  inset: fill === true ? "min-h-0 min-w-0" : "min-w-0",
   main: fill === true ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto",
 });

package/src/primitives/index.tsx

@@ -127,7 +127,8 @@ const cardSurface = cva(
     defaultVariants: { radius: "xl" },
   },
 );
-const cardFooter = "flex items-center justify-end gap-2 px-[var(--card-padding)] py-4";
+// Wraps instead of running off-screen when the row outgrows its container (fw#2528).
+const cardFooter = "flex flex-wrap items-center justify-end gap-2 px-[var(--card-padding)] py-4";
 const cardFooterBorder = "border-t bg-muted/30";
 
 // ---- Button (vendored shadcn ui/button) ----
@@ -717,11 +718,14 @@ function DefaultDataTable({
               {hasTableActions && (
                 <TableHead
                   data-testid="column-actions"
-                  // sticky right-0 + bg-muted (= header tone) so the action
-                  // column stays at the right edge during horizontal scroll.
-                  // No border-l: a permanent divider looks heavy; the sticky
-                  // bg already sets the column apart during scroll anyway.
-                  className="sticky right-0 z-10 w-px bg-muted text-right text-muted-foreground"
+                  // From md: sticky right-0 + bg-muted (= header tone) so the
+                  // action column stays at the right edge during horizontal
+                  // scroll on wider screens. Below md, actions scroll in
+                  // normal flow — sticky there would pin the column over the
+                  // preceding data column instead of the (already narrow)
+                  // page edge. No border-l: a permanent divider looks heavy;
+                  // the sticky bg already sets the column apart during scroll.
+                  className="w-px text-right text-muted-foreground md:sticky md:right-0 md:z-10 md:bg-muted"
                   aria-label="Actions"
                 />
               )}
@@ -766,10 +770,13 @@ function DefaultDataTable({
                 {hasTableActions && (
                   <TableCell
                     data-testid={getCellTestId?.(row, "actions") ?? `cell-${row.id}-actions`}
-                    // Sticky-right so the actions stay visible on the right
-                    // edge during horizontal scroll. bg-background sets the
-                    // column apart during scroll — no border-l (divider too heavy).
-                    className="sticky right-0 z-10 bg-background text-right"
+                    // From md: sticky-right so the actions stay visible on the
+                    // right edge during horizontal scroll. Below md, actions
+                    // scroll with the row like any other cell — sticky there
+                    // would hide the neighboring data column on narrow
+                    // viewports. bg-background sets the column apart during
+                    // scroll — no border-l (divider too heavy).
+                    className="text-right md:sticky md:right-0 md:z-10 md:bg-background"
                     // Action-cell events must not trigger the row click/activation
                     // (typically "Open Detail" — the user wanted the action,
                     // not navigation). We stopPropagation for mouse and
@@ -1699,9 +1706,10 @@ function DefaultForm({
               "[&>section:not(:first-child)]:border-t",
               "[&>:not(section)]:px-6 [&>:not(section)]:py-3",
               "[&>:not(section):first-child]:pt-6 [&>:not(section):last-child]:pb-6",
-              // ponytail: fixed footer height is a guess (button row + safe-area) —
-              // widen if a wizard step's last field ever renders visibly clipped.
-              stickyActions === true && "max-sm:pb-24",
+              // ponytail: fixed footer height is a guess (two wrapped button rows +
+              // 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",
             )}
           >
             <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>

package/src/widgets/drawer.tsx

@@ -13,7 +13,7 @@ import { DrawerSheetContent } from "./sheet-parts";
 // equivalent classes are inlined here rather than growing the vendored
 // SheetFooter's own default className with panel-specific styling.
 const DRAWER_FOOTER_CLASS =
-  "flex-row items-center justify-end border-t bg-background px-[var(--card-padding)] py-4";
+  "flex-row flex-wrap items-center justify-end border-t bg-background px-[var(--card-padding)] py-4";
 
 export type DrawerProps = {
   readonly open: boolean;