@asteby/metacore-runtime-react 20.1.5 → 20.1.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @asteby/metacore-runtime-react
 
+## 20.1.6
+
+### Patch Changes
+
+- 0ff3d4e: fix(kanban): fixed-width lanes (horizontal scroll, no squish) + drag preview matches card
+
+  Lanes were `flex-1 min-w-[220px] max-w-[320px]`, so with many stages they compressed
+  to a cramped width. They're now a fixed `w-[300px] shrink-0` so columns keep a
+  comfortable width and the board scrolls horizontally instead of squishing. The drag
+  overlay was a fixed `w-72` that no longer matched the in-lane card; it's now
+  `w-[284px]` (lane width minus the column padding) so a dragged card is the same size
+  as it sits in the column.
+
 ## 20.1.5
 
 ### Patch Changes

package/dist/dynamic-kanban.js

@@ -284,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: "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))) }));
+        return (_jsx("div", { className: "flex gap-4 overflow-x-auto p-1", children: [0, 1, 2, 3].map((i) => (_jsxs("div", { className: "w-[300px] 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))) }));
     }
     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', {
@@ -322,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 min-w-[220px] max-w-[320px] flex-1 flex-col rounded-lg border bg-muted/30 transition-opacity", style: {
+    return (_jsxs("div", { ref: setNodeRef, className: "flex w-[300px] shrink-0 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,
@@ -342,5 +342,5 @@ function KanbanCard({ card, titleCol, fieldCols, actions, locale, timeZone, curr
 }
 // 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: "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-start 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 break-words", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
+    return (_jsx(Card, { className: "w-[284px] cursor-grabbing border-primary/40 shadow-lg", children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsx("div", { className: "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-start 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 break-words", 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.1.5",
+  "version": "20.1.6",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/dynamic-kanban.tsx

@@ -440,7 +440,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="min-w-[220px] max-w-[320px] flex-1 space-y-3">
+                    <div key={i} className="w-[300px] shrink-0 space-y-3">
                         <Skeleton className="h-8 w-full" />
                         <Skeleton className="h-24 w-full" />
                         <Skeleton className="h-24 w-full" />
@@ -579,7 +579,7 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: Kanban
     return (
         <div
             ref={setNodeRef}
-            className="flex min-w-[220px] max-w-[320px] flex-1 flex-col rounded-lg border bg-muted/30 transition-opacity"
+            className="flex w-[300px] shrink-0 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',
@@ -739,7 +739,7 @@ function CardPreview({
     currency,
 }: Omit<KanbanCardProps, 'actions' | 'onClick' | 'onAction'>) {
     return (
-        <Card className="w-72 cursor-grabbing border-primary/40 shadow-lg">
+        <Card className="w-[284px] cursor-grabbing border-primary/40 shadow-lg">
             <CardContent className="space-y-1.5 p-3">
                 <div className="break-words text-sm font-medium leading-snug">
                     {titleCol ? (