@asteby/metacore-runtime-react 13.5.0 → 13.5.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @asteby/metacore-runtime-react
 
+## 13.5.1
+
+### Patch Changes
+
+- 2778004: fix(action-modal): sticky header + footer, scrollable body
+
+  A tall declarative form (a journal entry with many line-items rows) used to push
+  the Cancel/Submit footer below the viewport. The action modal now caps at 90vh
+  and scrolls ONLY the field area — the title and the action buttons stay pinned
+  and always reachable.
+
 ## 13.5.0
 
 ### Minor Changes

package/dist/action-modal-dispatcher.js

@@ -135,12 +135,12 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
         : hasLineItems
             ? '820px'
             : undefined;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: widthPx ? '' : 'sm:max-w-lg', style: widthPx ? { maxWidth: widthPx, width: '95vw' } : undefined, children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), action.label] }), action.confirmMessage && _jsx(DialogDescription, { children: action.confirmMessage })] }), _jsx("div", { className: "grid gap-4 py-4 sm:grid-cols-2", children: action.fields?.map((field) => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: 'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-lg'), style: { maxHeight: '90vh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }, children: [_jsxs(DialogHeader, { className: "shrink-0", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), action.label] }), action.confirmMessage && _jsx(DialogDescription, { children: action.confirmMessage })] }), _jsx("div", { className: "-mx-1 grid min-h-0 flex-1 gap-4 overflow-y-auto px-1 py-4 sm:grid-cols-2", children: action.fields?.map((field) => {
                         const fullWidth = isLineItemsField(field) ||
                             resolveWidget(field) === 'textarea' ||
                             resolveWidget(field) === 'richtext';
                         return (_jsxs("div", { className: 'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : ''), children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), renderField(field, formData[field.key], (v) => updateField(field.key, v))] }, field.key));
-                    }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: executing, children: t('common.cancel') }), _jsxs(Button, { onClick: execute, disabled: executing, style: action.color ? { backgroundColor: action.color, color: 'white' } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] })] })] }) }));
+                    }) }), _jsxs(DialogFooter, { className: "shrink-0", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: executing, children: t('common.cancel') }), _jsxs(Button, { onClick: execute, disabled: executing, style: action.color ? { backgroundColor: action.color, color: 'white' } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] })] })] }) }));
 }
 function renderField(field, value, onChange) {
     // Repeatable line-items group → row grid (value is an array of row objects).

package/package.json

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

package/src/action-modal-dispatcher.tsx

@@ -246,23 +246,28 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
+            {/* Sticky header + footer, scrollable body: the form can grow tall
+                (many line-items rows) past the viewport, so cap the dialog at
+                90vh and let ONLY the field area scroll — the title and the
+                Cancel/Submit actions stay pinned and always reachable. maxHeight
+                is inline (guaranteed) since an arbitrary max-h-[90vh] class may be
+                dropped by a consuming app's Tailwind scan. */}
             <DialogContent
-                className={widthPx ? '' : 'sm:max-w-lg'}
-                style={widthPx ? { maxWidth: widthPx, width: '95vw' } : undefined}
+                className={'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-lg')}
+                style={{ maxHeight: '90vh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }}
             >
-                <DialogHeader>
+                <DialogHeader className="shrink-0">
                     <DialogTitle className="flex items-center gap-2">
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
                         {action.label}
                     </DialogTitle>
                     {action.confirmMessage && <DialogDescription>{action.confirmMessage}</DialogDescription>}
                 </DialogHeader>
-                {/* Responsive 2-column grid: scalar fields (journal, date,
-                    reference) flow side-by-side instead of one tall vertical
-                    stack; line-items grids and textareas span the full width so
-                    they get room. Mirrors DynamicForm's pro layout — driven only
-                    by field shape, fully declarative. */}
-                <div className="grid gap-4 py-4 sm:grid-cols-2">
+                {/* Scrollable body. Responsive 2-column grid: scalar fields
+                    (journal, date, reference) flow side-by-side instead of one
+                    tall vertical stack; line-items grids and textareas span the
+                    full width. Mirrors DynamicForm — driven only by field shape. */}
+                <div className="-mx-1 grid min-h-0 flex-1 gap-4 overflow-y-auto px-1 py-4 sm:grid-cols-2">
                     {action.fields?.map((field) => {
                         const fullWidth =
                             isLineItemsField(field) ||
@@ -282,7 +287,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                         )
                     })}
                 </div>
-                <DialogFooter>
+                <DialogFooter className="shrink-0">
                     <Button variant="outline" onClick={() => onOpenChange(false)} disabled={executing}>
                         {t('common.cancel')}
                     </Button>