@cosmicdrift/kumiko-renderer-web 0.232.0 → 0.233.0

package/package.json

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

package/src/__tests__/form-action-bar.test.tsx

@@ -15,21 +15,70 @@ import { createMockDispatcher, render, screen } from "./test-utils";
 const { Form, Section, Button } = defaultPrimitives;
 
 describe("DefaultForm Action-Footer", () => {
-  test("Actions sitzen rechtsbündig am Form-Ende (border-t), Titel ist Heading", () => {
+  test("Actions sitzen am Form-Ende (border-t, sm:justify-between), Titel ist Heading", () => {
     render(
       <Form onSubmit={() => {}} title="Titel" actions={<Button>Save</Button>} testId="f">
         <div>body</div>
       </Form>,
     );
     const actions = screen.getByTestId("f-actions");
-    expect(actions.className).toContain("justify-end");
-    expect(actions.className).toContain("border-t");
+    // The border/layout classes live on the outer footer container (which
+    // also wraps the optional secondaryActions group), not on the inner
+    // `-actions` div itself.
+    const footer = actions.parentElement as HTMLElement;
+    expect(footer.className).toContain("sm:justify-between");
+    expect(footer.className).toContain("border-t");
     // Footer sits in the form shell (buttons align with the field edge).
     expect(actions.closest(".max-w-full")).toBeTruthy();
     // Title is its own heading above — not inside the action bar.
     expect(actions.textContent).not.toContain("Titel");
     expect(screen.getByTestId("f-title").textContent).toBe("Titel");
   });
+
+  test("secondaryActions + actions: zwei Gruppen mit eigenen testIds, Container flex-col-reverse", () => {
+    render(
+      <Form
+        onSubmit={() => {}}
+        actions={<Button>Save</Button>}
+        secondaryActions={<Button variant="danger-ghost">Delete</Button>}
+        testId="f"
+      >
+        <div>body</div>
+      </Form>,
+    );
+    const secondary = screen.getByTestId("f-actions-secondary");
+    const main = screen.getByTestId("f-actions");
+    expect(secondary.textContent).toBe("Delete");
+    expect(main.textContent).toBe("Save");
+    // Same outer footer container wraps both groups.
+    expect(secondary.parentElement).toBe(main.parentElement);
+    const footer = main.parentElement as HTMLElement;
+    expect(footer.className).toContain("flex-col-reverse");
+    expect(footer.className).toContain("sm:justify-between");
+  });
+
+  test("nur actions (keine secondaryActions): keine -actions-secondary-Gruppe", () => {
+    render(
+      <Form onSubmit={() => {}} actions={<Button>Save</Button>} testId="f">
+        <div>body</div>
+      </Form>,
+    );
+    expect(screen.queryByTestId("f-actions-secondary")).toBeNull();
+    expect(screen.getByTestId("f-actions").textContent).toBe("Save");
+  });
+
+  test("nur actions (keine secondaryActions): Gruppe bleibt rechtsbündig (sm:ml-auto)", () => {
+    render(
+      <Form onSubmit={() => {}} actions={<Button>Save</Button>} testId="f">
+        <div>body</div>
+      </Form>,
+    );
+    // justify-between on the footer only pushes the lone group to the edge
+    // when there's a second flex child to push away from — with a single
+    // child it falls back to flex-start, so the actions group needs its own
+    // margin to stay right-aligned on desktop.
+    expect(screen.getByTestId("f-actions").className).toContain("sm:ml-auto");
+  });
 });
 
 describe("DefaultSection ohne Titel", () => {

package/src/__tests__/primitives.test.tsx

@@ -43,7 +43,7 @@ describe("Button", () => {
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  test("loading: rendert Spinner statt Children + ist disabled", () => {
+  test("loading: Spinner ersetzt icon-Slot, Children bleiben sichtbar (kein Width-Jump) + ist disabled", () => {
     const onClick = mock();
     render(
       <Button loading onClick={onClick} testId="btn">
@@ -53,10 +53,28 @@ describe("Button", () => {
     const btn = screen.getByTestId("btn") as HTMLButtonElement;
     expect(btn.disabled).toBe(true);
     expect(btn.dataset["loading"]).toBe("true");
-    // Children verschwinden während loading; Spinner ist ein <svg>.
-    expect(btn.textContent).not.toContain("Save");
+    expect(btn.textContent).toContain("Save");
     expect(btn.querySelector("svg")).not.toBeNull();
   });
+
+  test("icon: rendert ein SVG vor dem Label, kein SVG ohne icon-Prop", () => {
+    render(
+      <Button icon="trash" testId="btn">
+        Delete
+      </Button>,
+    );
+    const btn = screen.getByTestId("btn") as HTMLButtonElement;
+    const svg = btn.querySelector("svg");
+    expect(svg).not.toBeNull();
+    expect(btn.textContent).toBe("Delete");
+    // The icon sits before the label text node in DOM order.
+    expect(svg?.compareDocumentPosition(btn.lastChild as Node)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+
+    render(<Button testId="btn-no-icon">Delete</Button>);
+    expect(screen.getByTestId("btn-no-icon").querySelector("svg")).toBeNull();
+  });
 });
 
 describe("Banner", () => {
@@ -234,6 +252,40 @@ describe("Input kind mapping", () => {
     expect(input.className).toContain("text-right");
     expect(document.querySelector("svg[aria-hidden='true']")).not.toBeNull();
   });
+
+  test('kind="number" unit="km": renders a muted, aria-hidden suffix inside the field and pads the input', () => {
+    render(<Input id="i" name="i" kind="number" value={58} unit="km" onChange={() => {}} />);
+    const input = screen.getByRole("spinbutton");
+    expect(input.className).toContain("pr-8");
+    const suffix = screen.getByText("km");
+    expect(suffix.getAttribute("aria-hidden")).toBe("true");
+    expect((input as HTMLInputElement).value).toBe("58");
+  });
+
+  test('kind="number" without unit: no suffix rendered, no right padding', () => {
+    render(<Input id="i" name="i" kind="number" value={58} onChange={() => {}} />);
+    expect(screen.queryByText("km")).toBeNull();
+    expect(screen.getByRole("spinbutton").className).not.toContain("pr-8");
+  });
+
+  test('kind="number" unit="km": typing only changes the numeric value, the unit never enters it', () => {
+    const onChange = mock();
+    render(<Input id="i" name="i" kind="number" value={58} unit="km" onChange={onChange} />);
+    fireEvent.change(screen.getByRole("spinbutton"), { target: { value: "120" } });
+    expect(onChange).toHaveBeenCalledWith(120);
+  });
+
+  test('kind="number" icon="hash" unit="km": both decorations render without clobbering each other', () => {
+    render(
+      <Input id="i" name="i" kind="number" value={58} icon="hash" unit="km" onChange={() => {}} />,
+    );
+    const input = screen.getByRole("spinbutton");
+    expect(input.className).toContain("pl-8");
+    expect(input.className).toContain("pr-8");
+    expect(document.querySelector("svg[aria-hidden='true']")).not.toBeNull();
+    const suffix = screen.getByText("km");
+    expect(suffix.getAttribute("aria-hidden")).toBe("true");
+  });
 });
 
 describe("DataTable", () => {
@@ -1202,9 +1254,11 @@ describe("Form", () => {
       </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;
+    // stickyActions classes live on the outer footer container, which wraps
+    // the (optional) secondary group and the main actions group together.
+    const footer = actionsFooter.parentElement as HTMLElement;
+    expect(footer.className).toContain("max-sm:fixed");
+    const contentContainer = footer.previousElementSibling as HTMLElement;
     expect(contentContainer.className).toContain("max-sm:pb-32");
   });
 
@@ -1215,12 +1269,9 @@ describe("Form", () => {
       </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;
+    const footer = actionsFooter.parentElement as HTMLElement;
+    expect(footer.className).not.toContain("max-sm:fixed");
+    const contentContainer = footer.previousElementSibling as HTMLElement;
     expect(contentContainer.className).not.toContain("max-sm:pb-32");
   });
 });

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

@@ -2927,6 +2927,26 @@ describe("RenderEdit locked state (#1896)", () => {
     expect(onDelete).not.toHaveBeenCalled();
   });
 
+  test("Delete sitzt in der secondary-Gruppe, Submit in der Haupt-Gruppe (fw#2568)", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 1, isUrgent: false }}
+          writeCommand="order:create"
+          onDelete={async () => {}}
+        />
+      </DispatcherProvider>,
+    );
+
+    const deleteButton = screen.getByTestId("render-edit-delete");
+    const submitButton = screen.getByTestId("render-edit-submit");
+    expect(deleteButton.closest('[data-testid$="-actions-secondary"]')).not.toBeNull();
+    expect(submitButton.closest('[data-testid$="-actions-secondary"]')).toBeNull();
+  });
+
   test("disabled prevents picking a draft candidate from adopting it (fw#1909)", async () => {
     const screenDef: EntityEditScreenDefinition = {
       id: "orders:screen:order-wizard-locked-draftpicker",

package/src/__tests__/render-list-narrow-cards.test.tsx

@@ -0,0 +1,187 @@
+// DataTable — card layout below the 768px breakpoint (offlot#37). Below
+// that width the table scrolled its columns out of reach with no visible
+// affordance (worse: the `md:sticky` actions column scrolled away WITH the
+// last data columns instead of staying reachable). These tests pin the
+// replacement: below the breakpoint, no <table> at all — one card per row,
+// every ViewModel column present as a label/value pair, actions always
+// visible, and a native <select> standing in for the header-click sort
+// affordance that has no header to attach to down here.
+//
+// Viewport is driven the same way embedded-list-input.test.tsx does it —
+// happy-dom's real innerWidth backs useIsNarrowViewport's matchMedia query,
+// so no matchMedia mock is needed.
+
+import { describe, expect, mock, test } from "bun:test";
+import userEvent from "@testing-library/user-event";
+import { defaultPrimitives } from "../primitives";
+import { fireEvent, render, screen, within } from "./test-utils";
+
+const { DataTable } = defaultPrimitives;
+
+function setViewportWidth(width: number): void {
+  (
+    window as unknown as { happyDOM: { setInnerWidth: (n: number) => void } }
+  ).happyDOM.setInnerWidth(width);
+}
+
+function withViewportWidth(width: number, run: () => void): void {
+  const originalWidth = window.innerWidth;
+  setViewportWidth(width);
+  try {
+    run();
+  } finally {
+    setViewportWidth(originalWidth);
+  }
+}
+
+const LONG_BIO =
+  "Anna joined the handler team in 2019 and has led onboarding for every partner integration since, focusing on payment reconciliation edge cases and cross-border tax handling.";
+
+const COLUMNS = [
+  { field: "name", label: "Name", type: "string", sortable: true },
+  { field: "email", label: "Email", type: "string", sortable: false },
+  { field: "role", label: "Role", type: "string", sortable: true },
+  { field: "bio", label: "Bio", type: "string", sortable: false },
+] as const;
+
+const ROWS = [
+  {
+    id: "u1",
+    values: { name: "Anna Beispiel", email: "anna@haendler.de", role: "Admin", bio: LONG_BIO },
+  },
+];
+
+describe("DataTable — cards below 768px", () => {
+  test("desktop viewport: table renders as before, no cards", () => {
+    withViewportWidth(1024, () => {
+      render(<DataTable columns={COLUMNS} rows={ROWS} testId="t" />);
+      expect(screen.getByTestId("t").tagName).toBe("TABLE");
+      expect(screen.queryByTestId("t-cards")).toBeNull();
+    });
+  });
+
+  test("narrow viewport: no <table>, one card per row, every column present as label + value", () => {
+    withViewportWidth(500, () => {
+      render(<DataTable columns={COLUMNS} rows={ROWS} testId="t" />);
+      expect(document.querySelector("table")).toBeNull();
+      const card = within(screen.getByTestId("t-cards")).getByTestId("row-u1");
+      // Title = first column (none highlighted here) — still findable, and
+      // not duplicated as a label/value pair below.
+      expect(card.textContent).toContain("Anna Beispiel");
+      for (const col of COLUMNS.filter((c) => c.field !== "name")) {
+        expect(within(card).getByText(col.label)).not.toBeNull();
+      }
+      expect(within(card).getByTestId("cell-u1-email").textContent).toBe("anna@haendler.de");
+      expect(within(card).getByTestId("cell-u1-role").textContent).toBe("Admin");
+      expect(within(card).getByTestId("cell-u1-bio").textContent).toBe(LONG_BIO);
+    });
+  });
+
+  test("highlighted column becomes the card title and does not repeat as a label/value pair", () => {
+    withViewportWidth(500, () => {
+      const columns = COLUMNS.map((c) => (c.field === "role" ? { ...c, highlighted: true } : c));
+      render(<DataTable columns={columns} rows={ROWS} testId="t" />);
+      const card = within(screen.getByTestId("t-cards")).getByTestId("row-u1");
+      expect(within(card).queryByText("Role")).toBeNull();
+      expect(within(card).getByText("Name")).not.toBeNull();
+    });
+  });
+
+  test("a value the table would truncate is shown in full in the card, without the truncate class", () => {
+    const originalWidth = window.innerWidth;
+    try {
+      setViewportWidth(1024);
+      const { unmount } = render(<DataTable columns={COLUMNS} rows={ROWS} testId="t" />);
+      const desktopCell = screen.getByTestId("cell-u1-bio");
+      expect(desktopCell.className).toContain("truncate");
+      unmount();
+
+      setViewportWidth(500);
+      render(<DataTable columns={COLUMNS} rows={ROWS} testId="t" />);
+      const cardCell = screen.getByTestId("cell-u1-bio");
+      expect(cardCell.className).not.toContain("truncate");
+      expect(cardCell.textContent).toBe(LONG_BIO);
+    } finally {
+      setViewportWidth(originalWidth);
+    }
+  });
+
+  test("row actions are present in the DOM and operable in card mode", async () => {
+    const originalWidth = window.innerWidth;
+    setViewportWidth(500);
+    try {
+      const onTrigger = mock();
+      render(
+        <DataTable
+          columns={COLUMNS}
+          rows={ROWS}
+          rowActions={[{ id: "edit", label: "Edit", onTrigger }]}
+          testId="t"
+        />,
+      );
+      const button = screen.getByTestId("row-u1-action-edit");
+      await userEvent.setup().click(button);
+      expect(onTrigger).toHaveBeenCalledTimes(1);
+    } finally {
+      setViewportWidth(originalWidth);
+    }
+  });
+
+  test("empty state renders the same way in card mode, no card container", () => {
+    withViewportWidth(500, () => {
+      render(<DataTable columns={COLUMNS} rows={[]} testId="t" />);
+      expect(screen.getByTestId("t-empty")).not.toBeNull();
+      expect(screen.queryByTestId("t-cards")).toBeNull();
+    });
+  });
+});
+
+// No column headers below the breakpoint, so SortableHeader's click-to-sort
+// has nothing to attach to — a native <select> fed from the sortable
+// columns is the whole replacement, only rendered when there is something
+// to sort and somewhere for the result to go.
+describe("DataTable — card-mode sort select", () => {
+  test("lists only the sortable columns, both directions, and reports the picked one", () => {
+    withViewportWidth(500, () => {
+      const onSortChange = mock();
+      render(<DataTable columns={COLUMNS} rows={ROWS} onSortChange={onSortChange} testId="t" />);
+      const select = screen.getByTestId("t-sort") as HTMLSelectElement;
+      const optionLabels = Array.from(select.options).map((o) => o.textContent);
+      expect(optionLabels).toEqual(["Unsorted", "Name ↑", "Name ↓", "Role ↑", "Role ↓"]);
+
+      fireEvent.change(select, { target: { value: "role:desc" } });
+      expect(onSortChange).toHaveBeenCalledWith({ field: "role", dir: "desc" });
+    });
+  });
+
+  test("no select without onSortChange — nothing to wire it to", () => {
+    withViewportWidth(500, () => {
+      render(<DataTable columns={COLUMNS} rows={ROWS} testId="t" />);
+      expect(screen.queryByTestId("t-sort")).toBeNull();
+    });
+  });
+
+  test("no select when no column is sortable", () => {
+    withViewportWidth(500, () => {
+      const onSortChange = mock();
+      const nonSortableColumns = COLUMNS.map((c) => ({ ...c, sortable: false }));
+      render(
+        <DataTable
+          columns={nonSortableColumns}
+          rows={ROWS}
+          onSortChange={onSortChange}
+          testId="t"
+        />,
+      );
+      expect(screen.queryByTestId("t-sort")).toBeNull();
+    });
+  });
+
+  test("desktop viewport never renders the select — header clicks already cover it", () => {
+    withViewportWidth(1024, () => {
+      const onSortChange = mock();
+      render(<DataTable columns={COLUMNS} rows={ROWS} onSortChange={onSortChange} testId="t" />);
+      expect(screen.queryByTestId("t-sort")).toBeNull();
+    });
+  });
+});

package/src/icons.tsx

@@ -0,0 +1,116 @@
+import type { NavIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
+import {
+  ArrowLeft,
+  ArrowRight,
+  BarChart3,
+  Bell,
+  BookOpen,
+  Building,
+  Calculator,
+  CalendarDays,
+  Check,
+  ClipboardList,
+  Coins,
+  Copy,
+  CreditCard,
+  Download,
+  FileText,
+  Folder,
+  FolderOpen,
+  Gauge,
+  Hash,
+  Home,
+  KeyRound,
+  Languages,
+  Layers,
+  LayoutDashboard,
+  LayoutGrid,
+  LineChart,
+  Link,
+  List,
+  Lock,
+  Mail,
+  Package,
+  Palette,
+  PiggyBank,
+  Plus,
+  Receipt,
+  Rocket,
+  Search,
+  Send,
+  Server,
+  Settings,
+  Share2,
+  Shield,
+  ShieldCheck,
+  Sparkles,
+  Table,
+  Tag,
+  Trash2,
+  TrendingUp,
+  Upload,
+  User,
+  Users,
+  Wallet,
+  Wand2,
+  X,
+} from "lucide-react";
+
+// Buttons resolve icons through the same map, importing it from the nav layout module would couple them to the sidebar.
+export const NAV_ICONS = {
+  dashboard: LayoutDashboard,
+  "layout-grid": LayoutGrid,
+  "book-open": BookOpen,
+  "clipboard-list": ClipboardList,
+  package: Package,
+  gauge: Gauge,
+  list: List,
+  table: Table,
+  layers: Layers,
+  building: Building,
+  calculator: Calculator,
+  wallet: Wallet,
+  coins: Coins,
+  "credit-card": CreditCard,
+  "piggy-bank": PiggyBank,
+  receipt: Receipt,
+  chart: LineChart,
+  "bar-chart": BarChart3,
+  trending: TrendingUp,
+  sparkles: Sparkles,
+  wand: Wand2,
+  calendar: CalendarDays,
+  file: FileText,
+  folder: Folder,
+  "folder-open": FolderOpen,
+  home: Home,
+  bell: Bell,
+  shield: Shield,
+  "shield-check": ShieldCheck,
+  send: Send,
+  settings: Settings,
+  users: Users,
+  user: User,
+  search: Search,
+  tag: Tag,
+  key: KeyRound,
+  link: Link,
+  palette: Palette,
+  share: Share2,
+  server: Server,
+  mail: Mail,
+  lock: Lock,
+  hash: Hash,
+  download: Download,
+  upload: Upload,
+  rocket: Rocket,
+  // Was imported but never registered — `icon: "plus"` silently fell back.
+  plus: Plus,
+  languages: Languages,
+  trash: Trash2,
+  x: X,
+  check: Check,
+  "arrow-left": ArrowLeft,
+  "arrow-right": ArrowRight,
+  copy: Copy,
+} as const satisfies Readonly<Record<NavIconKey, typeof Folder>>;

package/src/layout/nav-tree.tsx

@@ -17,7 +17,7 @@ import type {
   TreeAction,
   TreeNode,
 } from "@cosmicdrift/kumiko-framework/engine";
-import type { NavDefinition, NavIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { NavDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { NavNode, NavRegistrySlice } from "@cosmicdrift/kumiko-headless";
 import { resolveNavigation } from "@cosmicdrift/kumiko-headless";
 import type { AppSchema, FeatureSchema } from "@cosmicdrift/kumiko-renderer";
@@ -28,58 +28,7 @@ import {
   useNav,
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
-import {
-  BarChart3,
-  Bell,
-  BookOpen,
-  Building,
-  Calculator,
-  CalendarDays,
-  ChevronDown,
-  ChevronRight,
-  ClipboardList,
-  Coins,
-  CreditCard,
-  Download,
-  FileText,
-  Folder,
-  FolderOpen,
-  Gauge,
-  Hash,
-  Home,
-  KeyRound,
-  Languages,
-  Layers,
-  LayoutDashboard,
-  LayoutGrid,
-  LineChart,
-  Link,
-  List,
-  Lock,
-  Mail,
-  Package,
-  Palette,
-  PiggyBank,
-  Plus,
-  Receipt,
-  Rocket,
-  Search,
-  Send,
-  Server,
-  Settings,
-  Share2,
-  Shield,
-  ShieldCheck,
-  Sparkles,
-  Table,
-  Tag,
-  TrendingUp,
-  Upload,
-  User,
-  Users,
-  Wallet,
-  Wand2,
-} from "lucide-react";
+import { ChevronDown, ChevronRight, type Folder, Plus } from "lucide-react";
 import {
   createContext,
   type ReactNode,
@@ -91,6 +40,7 @@ import {
 } from "react";
 import { KumikoLink } from "../app/nav";
 import { useNavEntities, useNavProviders } from "../app/nav-providers-context";
+import { NAV_ICONS } from "../icons";
 import { cn } from "../lib/cn";
 import {
   SidebarGroup,
@@ -109,69 +59,6 @@ import {
 import { useDispatchTarget } from "./target-resolver-stub";
 import { parseTargetFromSearchParams } from "./target-url";
 
-// Nav-icon registry: a nav entry sets `icon: "<key>"` (in the r.nav decl),
-// the renderer maps the symbolic key to a lucide component. `NavIconKey` is
-// the closed vocabulary a feature author can write (packages/types/src/
-// nav-icon.ts); `satisfies` below makes this map a compile-time drift
-// guard — a key added to one without the other fails the build.
-//
-// `node.icon`/`TreeAction.icon` stay plain `string` at the resolved-tree
-// layer (dynamic/provider-supplied data isn't statically known), so the
-// runtime `Object.hasOwn` lookups below still see an unknown key on
-// occasion — that's the defense-in-depth fallback to the dot, not the
-// primary guard anymore.
-const NAV_ICONS = {
-  dashboard: LayoutDashboard,
-  "layout-grid": LayoutGrid,
-  "book-open": BookOpen,
-  "clipboard-list": ClipboardList,
-  package: Package,
-  gauge: Gauge,
-  list: List,
-  table: Table,
-  layers: Layers,
-  building: Building,
-  calculator: Calculator,
-  wallet: Wallet,
-  coins: Coins,
-  "credit-card": CreditCard,
-  "piggy-bank": PiggyBank,
-  receipt: Receipt,
-  chart: LineChart,
-  "bar-chart": BarChart3,
-  trending: TrendingUp,
-  sparkles: Sparkles,
-  wand: Wand2,
-  calendar: CalendarDays,
-  file: FileText,
-  folder: Folder,
-  "folder-open": FolderOpen,
-  home: Home,
-  bell: Bell,
-  shield: Shield,
-  "shield-check": ShieldCheck,
-  send: Send,
-  settings: Settings,
-  users: Users,
-  user: User,
-  search: Search,
-  tag: Tag,
-  key: KeyRound,
-  link: Link,
-  palette: Palette,
-  share: Share2,
-  server: Server,
-  mail: Mail,
-  lock: Lock,
-  hash: Hash,
-  download: Download,
-  upload: Upload,
-  rocket: Rocket,
-  // Was imported but never registered — `icon: "plus"` silently fell back.
-  plus: Plus,
-  languages: Languages,
-} as const satisfies Readonly<Record<NavIconKey, typeof Folder>>;
-
 // Widened alias for the two lookup sites below, which index by the plain
 // `string` icon key of the resolved NavNode/TreeAction tree — not the
 // closed NavIconKey union NAV_ICONS itself is typed against.
@@ -711,7 +598,10 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             {...(s.active && { "aria-current": "page" })}
           >
             <NavLeadingIcon node={node} active={s.active} label={s.displayLabel} />
-            <span className="min-w-0 truncate group-data-[collapsible=icon]:hidden">
+            <span
+              className="min-w-0 truncate group-data-[collapsible=icon]:hidden"
+              title={s.displayLabel}
+            >
               {s.displayLabel}
             </span>
             <NavBadge node={node} />
@@ -734,7 +624,10 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
           onClick={() => dispatch(target)}
         >
           <NavLeadingIcon node={node} active={s.active} label={s.displayLabel} />
-          <span className="min-w-0 truncate group-data-[collapsible=icon]:hidden">
+          <span
+            className="min-w-0 truncate group-data-[collapsible=icon]:hidden"
+            title={s.displayLabel}
+          >
             {s.displayLabel}
           </span>
           <NavBadge node={node} />
@@ -755,7 +648,9 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
         {...(s.expandable && { "aria-expanded": s.isExpanded })}
       >
         <NavLeadingIcon node={node} active={false} expanded={s.isExpanded} label={s.displayLabel} />
-        <span className="truncate group-data-[collapsible=icon]:hidden">{s.displayLabel}</span>
+        <span className="truncate group-data-[collapsible=icon]:hidden" title={s.displayLabel}>
+          {s.displayLabel}
+        </span>
         {s.expandable &&
           (s.isExpanded ? (
             <ChevronDown className="ml-auto" />
@@ -823,7 +718,10 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             {...(s.active && { "aria-current": "page" })}
           >
             <NavLeadingIcon node={node} active={s.active} label={s.displayLabel} />
-            <span className="min-w-0 truncate group-data-[collapsible=icon]:hidden">
+            <span
+              className="min-w-0 truncate group-data-[collapsible=icon]:hidden"
+              title={s.displayLabel}
+            >
               {s.displayLabel}
             </span>
             <NavBadge node={node} />
@@ -843,7 +741,10 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
         <SidebarMenuSubButton asChild isActive={s.active}>
           <button type="button" onClick={() => dispatch(target)}>
             <NavLeadingIcon node={node} active={s.active} label={s.displayLabel} />
-            <span className="min-w-0 truncate group-data-[collapsible=icon]:hidden">
+            <span
+              className="min-w-0 truncate group-data-[collapsible=icon]:hidden"
+              title={s.displayLabel}
+            >
               {s.displayLabel}
             </span>
             <NavBadge node={node} />
@@ -871,7 +772,9 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             expanded={s.isExpanded}
             label={s.displayLabel}
           />
-          <span className="truncate group-data-[collapsible=icon]:hidden">{s.displayLabel}</span>
+          <span className="truncate group-data-[collapsible=icon]:hidden" title={s.displayLabel}>
+            {s.displayLabel}
+          </span>
         </button>
       </SidebarMenuSubButton>
       <NodeActions node={node} />

package/src/primitives/__tests__/data-table-logic.test.ts

@@ -216,6 +216,39 @@ describe("defaultCellRender", () => {
     expect(defaultCellRender("hallo", "text")).toBe("hallo");
   });
 
+  test("text-Spalte mit vollem ISO-8601-Zeitstempel warnt einmal pro Spalte, Wert bleibt unverändert (fw#2569)", () => {
+    const prevNodeEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = "development";
+    const warn = spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const iso = "2026-09-04T12:30:00.000Z";
+      expect(defaultCellRender(iso, "text", undefined, undefined, "createdAt")).toBe(iso);
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(warn.mock.calls[0]?.[0]).toContain("createdAt");
+      // Same column, second row with a different ISO value → no second warning.
+      expect(
+        defaultCellRender("2026-09-05T08:00:00Z", "text", undefined, undefined, "createdAt"),
+      ).toBe("2026-09-05T08:00:00Z");
+      expect(warn).toHaveBeenCalledTimes(1);
+      // A different column still gets its own warning.
+      expect(defaultCellRender(iso, "text", undefined, undefined, "expiresAt")).toBe(iso);
+      expect(warn).toHaveBeenCalledTimes(2);
+      // Plain text and date-only strings never trigger the warning.
+      expect(defaultCellRender("hallo", "text", undefined, undefined, "name")).toBe("hallo");
+      expect(defaultCellRender("2026-09-04", "text", undefined, undefined, "day")).toBe(
+        "2026-09-04",
+      );
+      expect(warn).toHaveBeenCalledTimes(2);
+    } finally {
+      warn.mockRestore();
+      if (prevNodeEnv === undefined) {
+        delete process.env.NODE_ENV;
+      } else {
+        process.env.NODE_ENV = prevNodeEnv;
+      }
+    }
+  });
+
   test("number/decimal → locale-formatiert, kein roher Dezimalpunkt (fw#2160)", () => {
     expect(defaultCellRender(42, "number")).toBe(new Intl.NumberFormat(undefined).format(42));
     expect(defaultCellRender(245.5, "decimal")).toBe(

package/src/primitives/index.tsx

@@ -73,6 +73,7 @@ import {
   Children,
   type CSSProperties,
   createContext,
+  type KeyboardEvent,
   type MouseEvent,
   type ReactNode,
   useContext,
@@ -80,6 +81,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { NAV_ICONS } from "../icons";
 import { cn } from "../lib/cn";
 import { Badge } from "../ui/badge";
 import { buttonVariants, Button as UiButton } from "../ui/button";
@@ -113,6 +115,7 @@ import { DefaultTabs } from "./tabs";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
 import { TzInput } from "./tz-input";
+import { useIsNarrowViewport } from "./use-narrow-viewport";
 
 // ---- Card-Chrome (eine Definition für Form/Section/Card) ----
 
@@ -141,6 +144,7 @@ const BUTTON_VARIANT = {
   secondary: "outline",
   danger: "destructive",
   link: "link",
+  "danger-ghost": "ghost",
 } as const;
 
 const BUTTON_SIZE = {
@@ -162,14 +166,29 @@ function DefaultButton({
   testId,
   className,
   ref,
+  icon,
+  iconEnd,
 }: ButtonProps): ReactNode {
   // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner), nicht als
   // gepolsterte Fläche; width="full" streckt CTA-Buttons in Karten/Panels.
   const resolvedClassName = cn(
     variant === "link" ? "h-auto px-0 py-0" : "",
+    variant === "danger-ghost"
+      ? "text-destructive hover:text-destructive hover:bg-destructive/10"
+      : "",
     width === "full" ? "w-full" : "",
     className,
   );
+  const IconStart = icon !== undefined ? NAV_ICONS[icon] : undefined;
+  const IconEnd = iconEnd !== undefined ? NAV_ICONS[iconEnd] : undefined;
+  // Loading swaps the leading icon slot for a spinner and keeps `children` —
+  // replacing the label would shift the button's width mid-submit.
+  const leading =
+    loading === true ? (
+      <Loader2 className="size-4 animate-spin" aria-hidden="true" />
+    ) : IconStart !== undefined ? (
+      <IconStart className="size-4" aria-hidden="true" />
+    ) : null;
   return (
     <UiButton
       ref={ref}
@@ -183,7 +202,9 @@ function DefaultButton({
       aria-label={ariaLabel}
       className={resolvedClassName}
     >
-      {loading === true ? <Loader2 className="size-4 animate-spin" aria-hidden="true" /> : children}
+      {leading}
+      {children}
+      {IconEnd !== undefined && <IconEnd className="size-4" aria-hidden="true" />}
     </UiButton>
   );
 }
@@ -359,6 +380,24 @@ function withFieldIcon(icon: string | undefined, input: ReactNode): ReactNode {
   );
 }
 
+// Mirrors withFieldIcon on the right side: a muted, non-interactive unit
+// suffix rendered inside the input's visual box. Pure decoration — never
+// focusable, never touches the input's value.
+function withUnitSuffix(unit: string | undefined, input: ReactNode): ReactNode {
+  if (unit === undefined) return input;
+  return (
+    <div className="relative">
+      {input}
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-sm text-muted-foreground"
+      >
+        {unit}
+      </span>
+    </div>
+  );
+}
+
 function DefaultInput(props: InputProps): ReactNode {
   // Vendored ui/input + ui/checkbox stylen Fehler über `aria-invalid`
   // selbst — kein manuelles border-destructive mehr nötig.
@@ -409,23 +448,27 @@ function DefaultInput(props: InputProps): ReactNode {
         />
       );
     case "number":
-      return withFieldIcon(
-        props.icon,
-        <UiInput
-          type="number"
-          {...common}
-          data-testid={props.testId}
-          value={props.value}
-          step={props.step}
-          onChange={(e: ChangeEvent<HTMLInputElement>) => {
-            const v = e.target.value;
-            props.onChange(v === "" ? undefined : Number(v));
-          }}
-          className={cn(
-            "text-right tabular-nums",
-            fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined,
-          )}
-        />,
+      return withUnitSuffix(
+        props.unit,
+        withFieldIcon(
+          props.icon,
+          <UiInput
+            type="number"
+            {...common}
+            data-testid={props.testId}
+            value={props.value}
+            step={props.step}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              const v = e.target.value;
+              props.onChange(v === "" ? undefined : Number(v));
+            }}
+            className={cn(
+              "text-right tabular-nums",
+              fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined,
+              props.unit !== undefined ? "pr-8" : undefined,
+            )}
+          />,
+        ),
       );
     case "range":
       return (
@@ -682,20 +725,29 @@ function DefaultDataTable({
   // Optional hooks: a bare DataTable outside LocaleProvider must not crash.
   const tableTranslate = useOptionalTranslation();
   const tableLocale = useOptionalLocale();
+  // Below 768px a table scrolls its columns out of reach with no visible
+  // affordance (fw#2159 fixed the desktop case; narrow viewports never had
+  // one). Cards replace the table entirely below the breakpoint — same
+  // single-mount pattern as EmbeddedListInput/embedded-list-input.tsx.
+  const isNarrow = useIsNarrowViewport();
   // Toolbar-Wrapper: gemeinsamer Container für Toolbar+Tabelle damit
   // beide visuell zusammengehören. Toolbar ist NICHT sticky — Lists
   // scrollen typischerweise mit dem Page-Container, nicht intern.
   // Sticky würde mit der Topbar konkurrieren.
   const hasTableActions = rowActions !== undefined && rowActions.length > 0;
+  const isEmpty = rows.length === 0;
+  const emptyBlock: ReactNode = (
+    <div
+      data-testid={testId !== undefined ? `${testId}-empty` : "render-list-empty"}
+      className="flex flex-col items-center justify-center rounded-md border border-dashed p-12 text-sm text-muted-foreground gap-3"
+    >
+      {emptyState ?? <span>No entries.</span>}
+    </div>
+  );
+
   function tableInner(): ReactNode {
-    return rows.length === 0 ? (
-      <div
-        data-testid={testId !== undefined ? `${testId}-empty` : "render-list-empty"}
-        className="flex flex-col items-center justify-center rounded-md border border-dashed p-12 text-sm text-muted-foreground gap-3"
-      >
-        {emptyState ?? <span>No entries.</span>}
-      </div>
-    ) : (
+    if (isEmpty) return emptyBlock;
+    return (
       // dashboard-01-Muster: `rounded-lg border`-Rahmen, die Header-Zeile
       // trägt den bg-muted-Grauton. `bg-card` (statt transparent) → die Liste
       // sitzt auf derselben Card-Fläche wie Forms; auf Themes mit farbigem
@@ -794,7 +846,147 @@ function DefaultDataTable({
       </div>
     );
   }
-  const tableContent = tableInner();
+
+  // No column headers below the breakpoint, so the click-to-sort affordance
+  // on SortableHeader has nothing to attach to. A single native <select> is
+  // the whole fix — no custom widget, no menu — fed straight from the
+  // columns marked sortable in the ViewModel. Options carry the resolved
+  // {field, dir} directly so onChange can look the pick up by value instead
+  // of parsing/casting the option string back apart.
+  const sortableColumns = columns.filter((col) => col.sortable);
+  const sortOptions: readonly {
+    readonly value: string;
+    readonly field: string;
+    readonly dir: DataTableSortDir;
+    readonly label: string;
+  }[] = sortableColumns.flatMap((col) => [
+    { value: `${col.field}:asc`, field: col.field, dir: "asc", label: `${col.label} ↑` },
+    { value: `${col.field}:desc`, field: col.field, dir: "desc", label: `${col.label} ↓` },
+  ]);
+
+  function renderCard(row: ListRowViewModel): ReactNode {
+    const titleColumn = columns.find((col) => col.highlighted === true) ?? columns[0];
+    const detailColumns = columns.filter((col) => col !== titleColumn);
+    return (
+      <div
+        key={row.id}
+        data-testid={getRowTestId?.(row) ?? `row-${row.id}`}
+        {...(onRowClick !== undefined && {
+          role: "button" as const,
+          tabIndex: 0,
+          onClick: () => onRowClick(row),
+          onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {
+            if (e.key !== "Enter" && e.key !== " ") return;
+            e.preventDefault();
+            onRowClick(row);
+          },
+        })}
+        className={cn(
+          "flex flex-col gap-3 rounded-lg border bg-card p-4",
+          onRowClick !== undefined && "cursor-pointer",
+        )}
+      >
+        {titleColumn !== undefined && (
+          <div
+            data-testid={
+              getCellTestId?.(row, titleColumn.field) ?? `cell-${row.id}-${titleColumn.field}`
+            }
+            className="text-base font-medium"
+          >
+            <DataTableCell
+              value={row.values[titleColumn.field]}
+              row={row.values}
+              field={titleColumn.field}
+              type={titleColumn.type}
+              renderer={titleColumn.renderer}
+              translate={tableTranslate}
+              locale={tableLocale}
+              {...(titleColumn.optionLabels !== undefined && {
+                optionLabels: titleColumn.optionLabels,
+              })}
+              {...(onCellChange !== undefined && {
+                onChange: (value: unknown) => onCellChange(row.id, titleColumn.field, value),
+              })}
+            />
+          </div>
+        )}
+        <div className="flex flex-col gap-2">
+          {detailColumns.map((col) => (
+            <div key={col.field} className="flex flex-col gap-0.5">
+              <span className="text-xs text-muted-foreground">{col.label}</span>
+              <span
+                data-testid={getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`}
+                className="text-sm"
+              >
+                <DataTableCell
+                  value={row.values[col.field]}
+                  row={row.values}
+                  field={col.field}
+                  type={col.type}
+                  renderer={col.renderer}
+                  translate={tableTranslate}
+                  locale={tableLocale}
+                  {...(col.optionLabels !== undefined && { optionLabels: col.optionLabels })}
+                  {...(onCellChange !== undefined && {
+                    onChange: (value: unknown) => onCellChange(row.id, col.field, value),
+                  })}
+                />
+              </span>
+            </div>
+          ))}
+        </div>
+        {hasTableActions && (
+          // biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation only — not a control
+          <div
+            className="flex items-center justify-end gap-1 border-t pt-3"
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <RowActionsCell row={row} actions={rowActions} mode={rowActionMode} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  function cardsInner(): ReactNode {
+    if (isEmpty) return emptyBlock;
+    return (
+      <div
+        data-testid={testId !== undefined ? `${testId}-cards` : "render-list-cards"}
+        className="flex flex-col gap-3"
+      >
+        {onSortChange !== undefined && sortableColumns.length > 0 && (
+          <select
+            aria-label={tableTranslate?.("kumiko.list.sort.label") ?? "Sort"}
+            data-testid={testId !== undefined ? `${testId}-sort` : "render-list-sort"}
+            value={sort !== undefined && sort !== null ? `${sort.field}:${sort.dir}` : ""}
+            onChange={(e) => {
+              const raw = e.target.value;
+              if (raw === "") {
+                onSortChange(null);
+                return;
+              }
+              const picked = sortOptions.find((o) => o.value === raw);
+              if (picked === undefined) return;
+              onSortChange({ field: picked.field, dir: picked.dir });
+            }}
+            className="h-9 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          >
+            <option value="">{tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted"}</option>
+            {sortOptions.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        )}
+        {rows.map((row) => renderCard(row))}
+      </div>
+    );
+  }
+
+  const tableContent = isNarrow ? cardsInner() : tableInner();
 
   // Pager wird IMMER unter der Tabelle gerendert (auch bei rows=[]),
   // damit der User bei einem Filter-Hit-of-Zero zurückblättern kann
@@ -1456,11 +1648,30 @@ function isMoneyValue(value: unknown): value is MoneyCellValue {
 //   - select/multiSelect → human-readable (kebab-case → Title Case), multiSelect values joined with ", "
 //   - money → { amount, currency } formatted via Intl (not "[object Object]")
 //   - text/else → toString
+
+const ISO_DATETIME_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})?$/;
+const warnedTimestampColumns = new Set<string>();
+
+// A raw ISO string in a "text" column means the author forgot `renderer:
+// { format: "timestamp" }` — guessing a format here could be wrong, so we
+// warn and leave the value as-is instead of auto-formatting.
+function warnMissingTimestampFormat(columnKey: string | undefined): void {
+  if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+  const key = columnKey ?? "<unknown column>";
+  if (warnedTimestampColumns.has(key)) return;
+  warnedTimestampColumns.add(key);
+  // biome-ignore lint/suspicious/noConsole: dev-only assertion
+  console.warn(
+    `[kumiko] column "${key}" renders a raw ISO timestamp as text — add renderer: { format: "timestamp" } to its column definition.`,
+  );
+}
+
 export function defaultCellRender(
   value: unknown,
   type: string,
   optionLabels?: Readonly<Record<string, string>>,
   locale?: string,
+  columnKey?: string,
 ): string {
   if (value === null || value === undefined || value === "") return "";
   if (type === "boolean") return value === true ? "✓" : "";
@@ -1495,6 +1706,9 @@ export function defaultCellRender(
       })
       .join(", ");
   }
+  if (type === "text" && typeof value === "string" && ISO_DATETIME_RE.test(value)) {
+    warnMissingTimestampFormat(columnKey);
+  }
   return typeof value === "string" ? value : String(value);
 }
 
@@ -1603,7 +1817,7 @@ function DataTableCell({
       </Badge>
     );
   }
-  return defaultCellRender(value, type, optionLabels, locale);
+  return defaultCellRender(value, type, optionLabels, locale, field);
 }
 
 // ---- Form + Section + Grid + Text ----
@@ -1630,6 +1844,7 @@ function DefaultForm({
   title,
   subtitle,
   actions,
+  secondaryActions,
   testId,
   width,
   stickyActions,
@@ -1653,8 +1868,11 @@ function DefaultForm({
         )}
       >
         <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
-        {actions !== undefined && (
-          <div className="flex items-center justify-end gap-2">{actions}</div>
+        {(secondaryActions !== undefined || actions !== undefined) && (
+          <div className="flex items-center justify-end gap-2">
+            {secondaryActions}
+            {actions}
+          </div>
         )}
       </form>
     );
@@ -1714,11 +1932,10 @@ function DefaultForm({
           >
             <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
           </div>
-          {actions !== undefined && (
+          {(secondaryActions !== undefined || actions !== undefined) && (
             <div
-              data-testid={testId !== undefined ? `${testId}-actions` : undefined}
               className={cn(
-                cardFooter,
+                "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,
                 // Below sm (640px): pin to the viewport bottom instead of normal
                 // flow, so a virtual keyboard shrinking the viewport can't push
@@ -1729,7 +1946,22 @@ function DefaultForm({
                   "max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)] max-sm:pb-4",
               )}
             >
-              {actions}
+              {secondaryActions !== undefined && (
+                <div
+                  data-testid={testId !== undefined ? `${testId}-actions-secondary` : undefined}
+                  className="flex flex-wrap items-center gap-1 max-sm:[&_button]:text-xs"
+                >
+                  {secondaryActions}
+                </div>
+              )}
+              {actions !== undefined && (
+                <div
+                  data-testid={testId !== undefined ? `${testId}-actions` : undefined}
+                  className="flex items-center gap-2 max-sm:w-full max-sm:[&>button]:flex-1 max-sm:[&>button]:min-h-11 sm:ml-auto"
+                >
+                  {actions}
+                </div>
+              )}
             </div>
           )}
         </div>