@asteby/metacore-runtime-react 23.5.0 → 23.5.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 23.5.1
+
+### Patch Changes
+
+- 36e7cb8: DynamicKanban: las lanes ahora aprovechan el ancho del viewport. Crecen (flex-1) para llenar el contenedor cuando todas caben, con un ancho mínimo legible (280px) y un máximo razonable (420px); el scroll horizontal solo aparece cuando ya no caben. Elimina el espacio muerto a la derecha y las columnas angostas al reducir la ventana.
+
 ## 23.5.0
 
 ### Minor Changes

package/dist/dynamic-kanban.js

@@ -588,7 +588,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         }
     }, [api, endpoint, groupByKey, lanePagination, 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-[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))) }));
+        return (_jsx("div", { className: "flex w-full gap-4 overflow-x-auto p-1", children: [0, 1, 2, 3].map((i) => (_jsxs("div", { className: "min-w-[280px] max-w-[420px] flex-1 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', {
@@ -615,7 +615,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                                                     })
                                                     : t('kanban.noActiveFilters', {
                                                         defaultValue: 'Sin filtros',
-                                                    }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 gap-1 text-xs", onClick: clearAll, disabled: activeFilterCount === 0, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('kanban.clearAll', { defaultValue: 'Limpiar todo' }), activeFilterCount > 0 ? ` (${activeFilterCount})` : ''] })] })] })] }))] }), _jsx(FilterChipsRow, { fields: activeFields, onClearAll: clearAll, "data-testid": "kanban-filter-chips" }), _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) => {
+                                                    }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 gap-1 text-xs", onClick: clearAll, disabled: activeFilterCount === 0, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('kanban.clearAll', { defaultValue: 'Limpiar todo' }), activeFilterCount > 0 ? ` (${activeFilterCount})` : ''] })] })] })] }))] }), _jsx(FilterChipsRow, { fields: activeFields, onClearAll: clearAll, "data-testid": "kanban-filter-chips" }), _jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsx("div", { className: "flex w-full min-w-0 gap-4 overflow-x-auto p-1", "data-testid": "kanban-board", children: lanes.map((stage) => {
                             const allCards = grouped.get(stage.key) ?? [];
                             // Per-lane client-side narrowing (instant, scoped to this
                             // stage). The funnel (field/value) and the lane search
@@ -710,7 +710,12 @@ function KanbanLane({ stage, count, totalCount, serverTotal, hasMore, loadingMor
             text: laneFilter.text,
         }
         : undefined;
-    return (_jsxs("div", { ref: setNodeRef, className: "group/lane flex w-[300px] shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity", style: {
+    return (_jsxs("div", { ref: setNodeRef, 
+        // Fluid width: lanes grow (flex-1) to fill the board when they all
+        // fit, capped at max-w so a couple of lanes don't stretch absurdly
+        // wide. Below min-w the board's overflow-x-auto takes over and the
+        // lanes scroll horizontally at their minimum width.
+        className: "group/lane flex min-w-[280px] max-w-[420px] flex-1 shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity", style: {
             opacity: dimmed ? 0.45 : 1,
             outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
             outlineOffset: 2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.5.0",
+  "version": "23.5.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/dynamic-kanban.test.tsx

@@ -383,6 +383,29 @@ describe('DynamicKanban render', () => {
         // a secondary field label is present
         expect(screen.getAllByText('Assignee:').length).toBeGreaterThan(0)
     })
+
+    it('lays out fluid lanes: the board fills the width and lanes grow (flex-1) with a min/max width', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const { container } = render(
+            <ApiProvider client={fakeApi()}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog')
+        // The board fills the container and scrolls horizontally only on overflow.
+        const board = container.querySelector('[data-testid="kanban-board"]')!
+        expect(board.className).toContain('w-full')
+        expect(board.className).toContain('overflow-x-auto')
+        // Each lane grows to fill the available width but never shrinks past a
+        // readable min-width nor stretches beyond a sane max-width.
+        const lanes = container.querySelectorAll('[data-stage]')
+        expect(lanes.length).toBe(4)
+        lanes.forEach((lane) => {
+            expect(lane.className).toContain('flex-1')
+            expect(lane.className).toContain('min-w-[280px]')
+            expect(lane.className).toContain('max-w-[420px]')
+        })
+    })
 })
 
 // The drag itself is wired by dnd-kit (pointer + layout), which happy-dom can't

package/src/dynamic-kanban.tsx

@@ -877,9 +877,9 @@ export function DynamicKanban({
 
     if (loading) {
         return (
-            <div className="flex gap-4 overflow-x-auto p-1">
+            <div className="flex w-full gap-4 overflow-x-auto p-1">
                 {[0, 1, 2, 3].map((i) => (
-                    <div key={i} className="w-[300px] shrink-0 space-y-3">
+                    <div key={i} className="min-w-[280px] max-w-[420px] flex-1 shrink-0 space-y-3">
                         <Skeleton className="h-8 w-full" />
                         <Skeleton className="h-24 w-full" />
                         <Skeleton className="h-24 w-full" />
@@ -1023,7 +1023,7 @@ export function DynamicKanban({
             />
 
             <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
-                <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
+                <div className="flex w-full min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
                 {lanes.map((stage) => {
                     const allCards = grouped.get(stage.key) ?? []
                     // Per-lane client-side narrowing (instant, scoped to this
@@ -1309,7 +1309,11 @@ function KanbanLane({
     return (
         <div
             ref={setNodeRef}
-            className="group/lane flex w-[300px] shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity"
+            // Fluid width: lanes grow (flex-1) to fill the board when they all
+            // fit, capped at max-w so a couple of lanes don't stretch absurdly
+            // wide. Below min-w the board's overflow-x-auto takes over and the
+            // lanes scroll horizontally at their minimum width.
+            className="group/lane flex min-w-[280px] max-w-[420px] flex-1 shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity"
             style={{
                 opacity: dimmed ? 0.45 : 1,
                 outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',