@asteby/metacore-runtime-react 20.0.0 → 20.1.1

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @asteby/metacore-runtime-react
 
+## 20.1.1
+
+### Patch Changes
+
+- eb6c65f: Kanban responsive board + cards truncate; sidebar nav lights the default view on a view-less landing
+
+  Two frontend UX fixes reported against the ops board.
+
+  **Kanban now adapts instead of overflowing (`@asteby/metacore-runtime-react`).**
+  `DynamicKanban` lanes were fixed-width (`w-72 shrink-0`), so with 4+ stages the
+  last lane was clipped off-viewport and long card text was cut by the card edge
+  with no ellipsis. Lanes are now responsive — `flex-1 min-w-[220px] max-w-[320px]`
+  — so they shrink to fit the available width and only scroll horizontally when
+  they genuinely can't fit. Card titles now `line-clamp-2 break-words` and the
+  secondary field rows carry `min-w-0` so long values ellipsize _inside_ the card
+  rather than being clipped by the border. The optimistic drag-to-move (PUT
+  `<base>/<id>`) is untouched.
+
+  **Sidebar nav active-state on the default/view-less landing (`@asteby/metacore-ui`,
+  `@asteby/metacore-starter-core`).** Landing on a model's bare list surface
+  (e.g. `/m/github_issues?per_page=15` — a transient param, no `view`) lit
+  _neither_ the "Tablero" (`?view=kanban`) nor the "Issues" (`?view=list`) nav
+  item, because the empty view bucket matched neither sibling's explicit view.
+  `checkIsActive` now treats the empty/`view=list`/`view=table` buckets as
+  "default-equivalent": a view-less current URL lights the list/default item while
+  the board (`?view=kanban`, never a default bucket) stays mutually exclusive. The
+  prior Board-vs-Issues exclusivity, `f_` filter and transient (page/sort/search)
+  behaviour are all preserved (18 matcher tests, +4 new). Ported to the
+  `starter-core` scaffold's embedded copy for parity.
+
+- Updated dependencies [eb6c65f]
+  - @asteby/metacore-ui@2.6.1
+
+## 20.1.0
+
+### Minor Changes
+
+- 8de09a9: DynamicKanban: traduce el label de cada etapa via i18n (`t(stage.label)` con fallback al valor crudo) — antes mostraba la key cruda (ej. `integration_github.stage.backlog`) en vez de "Backlog". Y da min-height a las lanes para que el scroll horizontal del board quede abajo en vez de flotar cuando las columnas están vacías.
+
+### Patch Changes
+
+- 8de09a9: fix(kanban): el drag-to-move ya no duplica `/me` en el PUT (causaba 404 "No se pudo mover la tarjeta"); el board respeta el ancho del padre (`min-w-0`) y deja de desbordarse horizontalmente.
+
 ## 20.0.0
 
 ### Minor Changes

package/dist/dynamic-kanban.d.ts

@@ -44,8 +44,8 @@ export interface DynamicKanbanProps {
     /** Model key as registered on the backend (e.g. "issue"). */
     model: string;
     /**
-     * Data endpoint base. Defaults to `/data/<model>`. The optimistic update
-     * PUTs to `<base>/me/<id>`.
+     * Data endpoint base — the org-scoped LIST endpoint (e.g.
+     * `/data/<model>/me`). The optimistic update PUTs to `<base>/<id>`.
      */
     endpoint?: string;
     /** Bump to force a metadata + records refetch (same contract as DynamicTable). */

package/dist/dynamic-kanban.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-kanban.d.ts","sourceRoot":"","sources":["../src/dynamic-kanban.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqC9B,OAAO,KAAK,EACR,aAAa,EACb,gBAAgB,EAGhB,SAAS,EACT,eAAe,EAClB,MAAM,SAAS,CAAA;AAMhB;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,aAAa,GAAG,SAAS,EAAE,CAejE;AAQD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAA;AAE/C,wBAAgB,YAAY,CACxB,OAAO,EAAE,GAAG,EAAE,EACd,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,SAAS,EAAE,GACpB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAepB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,EAC1C,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACX,OAAO,CAOT;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAC3B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,GACnB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAYpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC7B,QAAQ,EAAE,aAAa,EACvB,SAAS,SAAI,GACd;IAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAkBhE;AA8BD,MAAM,WAAW,kBAAkB;IAC/B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kFAAkF;IAClF,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,QAAc,EACd,QAAQ,EACR,QAAQ,GACX,EAAE,kBAAkB,qBA+RpB"}
+{"version":3,"file":"dynamic-kanban.d.ts","sourceRoot":"","sources":["../src/dynamic-kanban.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqC9B,OAAO,KAAK,EACR,aAAa,EACb,gBAAgB,EAGhB,SAAS,EACT,eAAe,EAClB,MAAM,SAAS,CAAA;AAMhB;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,aAAa,GAAG,SAAS,EAAE,CAejE;AAQD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAA;AAE/C,wBAAgB,YAAY,CACxB,OAAO,EAAE,GAAG,EAAE,EACd,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,SAAS,EAAE,GACpB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAepB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,EAC1C,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACX,OAAO,CAOT;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAC3B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,GACnB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAYpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC7B,QAAQ,EAAE,aAAa,EACvB,SAAS,SAAI,GACd;IAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAkBhE;AA8BD,MAAM,WAAW,kBAAkB;IAC/B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kFAAkF;IAClF,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,QAAc,EACd,QAAQ,EACR,QAAQ,GACX,EAAE,kBAAkB,qBAmSpB"}

package/dist/dynamic-kanban.js

@@ -261,7 +261,11 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, pa
         setRecords((rs) => rs.map((r) => String(r.id) === cardId ? { ...r, [groupByKey]: destStage } : r));
         try {
             const base = endpoint || `/data/${model}`;
-            const res = (await api.put(`${base}/me/${cardId}`, {
+            // `base` is the org-scoped list endpoint (e.g. `/data/<model>/me`),
+            // so the per-record update is just `<base>/<id>` — same convention
+            // as DynamicTable/DynamicRelation. Appending an extra `/me` here
+            // produced `/data/<model>/me/me/<id>` → 404 on drag-to-move.
+            const res = (await api.put(`${base}/${cardId}`, {
                 [groupByKey]: destStage,
             }));
             if (res?.data && res.data.success === false) {
@@ -280,7 +284,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, pa
         }
     }, [api, endpoint, groupByKey, model, records, stageOfCard, t, transitions]);
     if (loading) {
-        return (_jsx("div", { className: "flex gap-4 overflow-x-auto p-1", children: [0, 1, 2, 3].map((i) => (_jsxs("div", { className: "w-72 shrink-0 space-y-3", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" })] }, i))) }));
+        return (_jsx("div", { className: "flex gap-4 overflow-x-auto p-1", children: [0, 1, 2, 3].map((i) => (_jsxs("div", { className: "min-w-[220px] max-w-[320px] flex-1 space-y-3", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" })] }, i))) }));
     }
     if (!metadata || !groupByKey || stages.length === 0) {
         return (_jsx("div", { className: "rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground", children: t('kanban.noStages', {
@@ -298,7 +302,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, pa
             order: Number.MAX_SAFE_INTEGER,
         });
     }
-    return (_jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsx("div", { className: "flex gap-4 overflow-x-auto p-1", "data-testid": "kanban-board", children: lanes.map((stage) => {
+    return (_jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsx("div", { className: "flex min-w-0 gap-4 overflow-x-auto p-1", "data-testid": "kanban-board", children: lanes.map((stage) => {
                     const cards = grouped.get(stage.key) ?? [];
                     const droppableAllowed = !activeId ||
                         stage.key === activeStage ||
@@ -318,7 +322,7 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }) {
     const headerStyle = generateBadgeStyles(stage.color || optionColor(stage.key), {
         isDark,
     });
-    return (_jsxs("div", { ref: setNodeRef, className: "flex w-72 shrink-0 flex-col rounded-lg border bg-muted/30 transition-opacity", style: {
+    return (_jsxs("div", { ref: setNodeRef, className: "flex min-w-[220px] max-w-[320px] flex-1 flex-col rounded-lg border bg-muted/30 transition-opacity", style: {
             opacity: dimmed ? 0.45 : 1,
             outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
             outlineOffset: 2,
@@ -329,14 +333,14 @@ function KanbanCard({ card, titleCol, fieldCols, actions, locale, timeZone, curr
         id: String(card.id),
     });
     const visibleActions = actions.filter((a) => isActionAllowedForRowState(a, card));
-    return (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: "cursor-grab active:cursor-grabbing border-border/70 shadow-sm", style: { opacity: isDragging ? 0.4 : 1 }, onClick: () => onClick?.(card), "data-card-id": String(card.id), children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "min-w-0 flex-1 text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (_jsx("span", { className: "truncate", children: String(card.id) })) }), visibleActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0 -mr-1 -mt-1", 
+    return (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: "cursor-grab active:cursor-grabbing border-border/70 shadow-sm", style: { opacity: isDragging ? 0.4 : 1 }, onClick: () => onClick?.(card), "data-card-id": String(card.id), children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "line-clamp-2 min-w-0 flex-1 break-words text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (_jsx("span", { className: "truncate", children: String(card.id) })) }), visibleActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0 -mr-1 -mt-1", 
                                         // Don't start a drag / card click from the menu button.
                                         onPointerDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", onClick: (e) => e.stopPropagation(), children: visibleActions.map((a) => (_jsxs(DropdownMenuItem, { onClick: (e) => {
                                             e.stopPropagation();
                                             onAction(a, card);
-                                        }, children: [_jsx(DynamicIcon, { name: a.icon || 'Zap', className: "mr-2 h-4 w-4" }), a.label] }, a.key))) })] }))] }), fieldCols.map((col) => (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
+                                        }, children: [_jsx(DynamicIcon, { name: a.icon || 'Zap', className: "mr-2 h-4 w-4" }), a.label] }, a.key))) })] }))] }), fieldCols.map((col) => (_jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
 }
 // Static preview rendered inside the DragOverlay (no dnd hooks, no menu).
 function CardPreview({ card, titleCol, fieldCols, locale, timeZone, currency, }) {
-    return (_jsx(Card, { className: "w-72 cursor-grabbing border-primary/40 shadow-lg", children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsx("div", { className: "text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (String(card.id)) }), fieldCols.map((col) => (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
+    return (_jsx(Card, { className: "w-72 cursor-grabbing border-primary/40 shadow-lg", children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsx("div", { className: "line-clamp-2 break-words text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (String(card.id)) }), fieldCols.map((col) => (_jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "20.0.0",
+  "version": "20.1.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.6.0"
+    "@asteby/metacore-ui": "^2.6.1"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.6.0"
+    "@asteby/metacore-ui": "2.6.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dynamic-kanban.tsx

@@ -238,8 +238,8 @@ export interface DynamicKanbanProps {
     /** Model key as registered on the backend (e.g. "issue"). */
     model: string
     /**
-     * Data endpoint base. Defaults to `/data/<model>`. The optimistic update
-     * PUTs to `<base>/me/<id>`.
+     * Data endpoint base — the org-scoped LIST endpoint (e.g.
+     * `/data/<model>/me`). The optimistic update PUTs to `<base>/<id>`.
      */
     endpoint?: string
     /** Bump to force a metadata + records refetch (same contract as DynamicTable). */
@@ -411,7 +411,11 @@ export function DynamicKanban({
 
             try {
                 const base = endpoint || `/data/${model}`
-                const res = (await api.put(`${base}/me/${cardId}`, {
+                // `base` is the org-scoped list endpoint (e.g. `/data/<model>/me`),
+                // so the per-record update is just `<base>/<id>` — same convention
+                // as DynamicTable/DynamicRelation. Appending an extra `/me` here
+                // produced `/data/<model>/me/me/<id>` → 404 on drag-to-move.
+                const res = (await api.put(`${base}/${cardId}`, {
                     [groupByKey]: destStage,
                 })) as { data?: ApiResponse<any> }
                 if (res?.data && res.data.success === false) {
@@ -437,7 +441,7 @@ export function DynamicKanban({
         return (
             <div className="flex gap-4 overflow-x-auto p-1">
                 {[0, 1, 2, 3].map((i) => (
-                    <div key={i} className="w-72 shrink-0 space-y-3">
+                    <div key={i} className="min-w-[220px] max-w-[320px] flex-1 space-y-3">
                         <Skeleton className="h-8 w-full" />
                         <Skeleton className="h-24 w-full" />
                         <Skeleton className="h-24 w-full" />
@@ -473,7 +477,7 @@ export function DynamicKanban({
 
     return (
         <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
-            <div className="flex gap-4 overflow-x-auto p-1" data-testid="kanban-board">
+            <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
                 {lanes.map((stage) => {
                     const cards = grouped.get(stage.key) ?? []
                     const droppableAllowed =
@@ -576,7 +580,7 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: Kanban
     return (
         <div
             ref={setNodeRef}
-            className="flex w-72 shrink-0 flex-col rounded-lg border bg-muted/30 transition-opacity"
+            className="flex min-w-[220px] max-w-[320px] flex-1 flex-col rounded-lg border bg-muted/30 transition-opacity"
             style={{
                 opacity: dimmed ? 0.45 : 1,
                 outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
@@ -651,7 +655,7 @@ function KanbanCard({
         >
             <CardContent className="space-y-1.5 p-3">
                 <div className="flex items-start justify-between gap-2">
-                    <div className="min-w-0 flex-1 text-sm font-medium leading-snug">
+                    <div className="line-clamp-2 min-w-0 flex-1 break-words text-sm font-medium leading-snug">
                         {titleCol ? (
                             <ActivityValueRenderer
                                 value={card[titleCol.key]}
@@ -701,7 +705,7 @@ function KanbanCard({
                 {fieldCols.map((col) => (
                     <div
                         key={col.key}
-                        className="flex items-center gap-1.5 text-xs text-muted-foreground"
+                        className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground"
                     >
                         <span className="shrink-0 opacity-70">{col.label}:</span>
                         <span className="min-w-0 truncate">
@@ -732,7 +736,7 @@ function CardPreview({
     return (
         <Card className="w-72 cursor-grabbing border-primary/40 shadow-lg">
             <CardContent className="space-y-1.5 p-3">
-                <div className="text-sm font-medium leading-snug">
+                <div className="line-clamp-2 break-words text-sm font-medium leading-snug">
                     {titleCol ? (
                         <ActivityValueRenderer
                             value={card[titleCol.key]}
@@ -748,7 +752,7 @@ function CardPreview({
                 {fieldCols.map((col) => (
                     <div
                         key={col.key}
-                        className="flex items-center gap-1.5 text-xs text-muted-foreground"
+                        className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground"
                     >
                         <span className="shrink-0 opacity-70">{col.label}:</span>
                         <span className="min-w-0 truncate">