@cosmicdrift/kumiko-renderer-web 0.232.0 → 0.234.0

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/__tests__/workspace-shell.test.tsx

@@ -440,13 +440,12 @@ describe("WorkspaceShell", () => {
     expect(screen.queryByText("Tours")).toBeNull();
   });
 
-  test("fill=true applies h-svh on root and min-h-0 on inset/main", () => {
+  test("fill defaults to true: applies h-svh on root and min-h-0 on inset/main", () => {
     renderShell(
       <WorkspaceShell
         brand={<div>Brand</div>}
         schema={schema}
         user={{ id: "u1", roles: ["admin"] }}
-        fill
       >
         <div>content</div>
       </WorkspaceShell>,
@@ -462,13 +461,15 @@ describe("WorkspaceShell", () => {
     expect(innerMain?.classList.contains("overflow-auto")).toBe(true);
   });
 
-  // #1692: default (no fill) must not force viewport-lock classes
-  test("without fill does not apply h-svh or min-h-0", () => {
+  // fill={false} is the escape hatch back to page-scroll: must not apply
+  // viewport-lock classes.
+  test("fill={false} does not apply h-svh or min-h-0", () => {
     renderShell(
       <WorkspaceShell
         brand={<div>Brand</div>}
         schema={schema}
         user={{ id: "u1", roles: ["admin"] }}
+        fill={false}
       >
         <div>content</div>
       </WorkspaceShell>,

package/src/icons.tsx

@@ -0,0 +1,199 @@
+// Icon registry: symbolic `NavIconKey` → lucide-react 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.
+//
+// Runtime data (provider-supplied nav/action icons) is only typed as plain
+// `string` at the resolved-tree layer, so an unknown key can still show up
+// at runtime on occasion — `Icon` falls back to rendering the raw key as
+// text rather than crashing, mirroring the old `ActionGlyph` behavior in
+// nav-tree.tsx.
+//
+// Buttons resolve icons through the same map — importing it from the nav
+// layout module would couple them to the sidebar.
+import type { NavIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
+import {
+  AlertTriangle,
+  Archive,
+  ArrowLeft,
+  ArrowRight,
+  BarChart3,
+  Bell,
+  BookOpen,
+  Building,
+  Calculator,
+  CalendarDays,
+  Check,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  ClipboardList,
+  Clock,
+  Coins,
+  Copy,
+  CreditCard,
+  Download,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  FileText,
+  Filter,
+  Flag,
+  Folder,
+  FolderOpen,
+  Gauge,
+  Hash,
+  Home,
+  Info,
+  KeyRound,
+  Languages,
+  Layers,
+  LayoutDashboard,
+  LayoutGrid,
+  LineChart,
+  Link,
+  List,
+  Loader2,
+  Lock,
+  Mail,
+  MapPin,
+  MoreHorizontal,
+  MoreVertical,
+  Package,
+  Palette,
+  Pencil,
+  Phone,
+  PiggyBank,
+  Plus,
+  Printer,
+  Receipt,
+  RefreshCw,
+  Rocket,
+  Save,
+  Search,
+  Send,
+  Server,
+  Settings,
+  Share2,
+  Shield,
+  ShieldCheck,
+  Sparkles,
+  Star,
+  Table,
+  Tag,
+  Trash2,
+  TrendingUp,
+  Undo2,
+  Upload,
+  User,
+  Users,
+  Wallet,
+  Wand2,
+  X,
+  XCircle,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "./lib/cn";
+
+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,
+  pencil: Pencil,
+  eye: Eye,
+  "eye-off": EyeOff,
+  filter: Filter,
+  refresh: RefreshCw,
+  "more-horizontal": MoreHorizontal,
+  "more-vertical": MoreVertical,
+  "external-link": ExternalLink,
+  "chevron-down": ChevronDown,
+  "chevron-right": ChevronRight,
+  save: Save,
+  undo: Undo2,
+  archive: Archive,
+  star: Star,
+  flag: Flag,
+  clock: Clock,
+  "map-pin": MapPin,
+  phone: Phone,
+  printer: Printer,
+  "alert-triangle": AlertTriangle,
+  info: Info,
+  "check-circle": CheckCircle2,
+  "x-circle": XCircle,
+  loader: Loader2,
+} as const satisfies Readonly<Record<NavIconKey, typeof Folder>>;
+
+// Widened alias for runtime lookups against the plain `string` icon keys
+// resolved-tree nodes carry — not the closed NavIconKey union NAV_ICONS
+// itself is typed against.
+const ICON_LOOKUP: Readonly<Record<string, typeof Folder | undefined>> = NAV_ICONS;
+
+export function Icon({
+  name,
+  className,
+}: {
+  readonly name: NavIconKey;
+  readonly className?: string;
+}): ReactNode {
+  const LucideIcon = Object.hasOwn(NAV_ICONS, name) ? ICON_LOOKUP[name] : undefined;
+  if (LucideIcon !== undefined) return <LucideIcon aria-hidden="true" className={className} />;
+  return (
+    <span aria-hidden="true" className={cn("text-xs", className)}>
+      {name}
+    </span>
+  );
+}

package/src/layout/app-layout.tsx

@@ -13,12 +13,12 @@ export type AppLayoutProps = {
   readonly sidebar?: ReactNode;
   readonly children: ReactNode;
   readonly testId?: string;
-  /** Viewport-fit Shell. true → Wurzel = `h-screen` (fixe Viewport-Höhe),
-   *  Sidebar/Topbar bleiben stehen, der Main-Bereich scrollt INNEN
-   *  (`min-h-0` + `overflow-auto`). false (Default) → klassischer
-   *  `min-h-screen`-Flow, die ganze Seite scrollt. Dashboard-artige Apps
-   *  wollen `true`; eine öffentliche, lange Content-Seite eher `false`.
-   *  Clippt nie — der Content scrollt in `main` statt im Body. */
+  /** Viewport-fit Shell. Default `true` → Wurzel = `h-screen` (fixe
+   *  Viewport-Höhe), Sidebar/Topbar bleiben stehen, der Main-Bereich
+   *  scrollt INNEN (`min-h-0` + `overflow-auto`). `false` → klassischer
+   *  `min-h-screen`-Flow, die ganze Seite scrollt — Escape-Hatch für
+   *  eine öffentliche, lange Content-Seite die echten Body-Scroll
+   *  braucht. Clippt nie — der Content scrollt in `main` statt im Body. */
   readonly fill?: boolean;
   /** Optionaler Klassen-Append an die Wurzel (eigener Hintergrund etc.).
    *  Erweitert die Defaults, ersetzt sie nicht (cn-merge). */
@@ -32,7 +32,7 @@ export function AppLayout({
   sidebar,
   children,
   testId,
-  fill,
+  fill = true,
   className,
   mainClassName,
 }: AppLayoutProps): ReactNode {

package/src/layout/default-app-shell.tsx

@@ -68,7 +68,8 @@ export type DefaultAppShellProps = {
    *  Plan-Banner. */
   readonly sidebarFooter?: ReactNode;
   /** Viewport-fit Shell. true → fixe Viewport-Höhe (`h-svh`), der Content
-   *  scrollt INNEN statt der ganzen Seite. Default false (Seiten-Scroll). */
+   *  scrollt INNEN statt der ganzen Seite. Default true — `fill={false}`
+   *  schaltet zurück auf Seiten-Scroll. */
   readonly fill?: boolean;
   /** Screen-Content der im SidebarInset gerendert wird. */
   readonly children: ReactNode;
@@ -82,7 +83,7 @@ export function DefaultAppShell({
   headerActions,
   navBadges,
   sidebarFooter,
-  fill,
+  fill = true,
   children,
 }: DefaultAppShellProps): ReactNode {
   const fillCls = fillClasses(fill);

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} />