@schukai/monster 4.124.0 → 4.124.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.124.1] - 2026-02-23
+
+### Bug Fixes
+
+- **datatable:** constrain horizontal scrolling to table body wrapper
+
+
+
 ## [4.124.0] - 2026-02-20
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.124.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.124.1"}

package/source/components/datatable/datatable.mjs

@@ -1613,10 +1613,12 @@ function getTemplate() {
                     <slot name="bar"></slot>
 
                 </div>
-                <div data-monster-role="datatable-headers" data-monster-insert="headers-row path:headers"></div>
-                <div data-monster-replace="path:templates.emptyState"
-                     data-monster-attributes="class path:data | has-entries | ?:hidden:empty-state-container"></div>
-                <div data-monster-role="datatable" data-monster-insert="\${row-key} path:data">
+                <div data-monster-role="table-scroll">
+                    <div data-monster-role="datatable-headers" data-monster-insert="headers-row path:headers"></div>
+                    <div data-monster-replace="path:templates.emptyState"
+                         data-monster-attributes="class path:data | has-entries | ?:hidden:empty-state-container"></div>
+                    <div data-monster-role="datatable" data-monster-insert="\${row-key} path:data">
+                    </div>
                 </div>
             </div>
             <div data-monster-role="footer" data-monster-select-this="true"

package/source/components/datatable/save-button.mjs

@@ -114,14 +114,14 @@ class SaveButton extends CustomElement {
 	 * @property {string} labels.button The button label
 	 * @property {Object} classes The classes
 	 * @property {string} classes.bar The bar class
- * @property {string} classes.badge The badge class
- * @property {Array} ignoreChanges The ignore changes (regex)
- * @property {Array} data The data
- * @property {boolean} disabled The disabled state
- * @property {boolean} disableWhenNoChanges Disable button when there are no changes
- * @property {string} logLevel The log level (off, debug)
- * @return {Object}
- */
+	 * @property {string} classes.badge The badge class
+	 * @property {Array} ignoreChanges The ignore changes (regex)
+	 * @property {Array} data The data
+	 * @property {boolean} disabled The disabled state
+	 * @property {boolean} disableWhenNoChanges Disable button when there are no changes
+	 * @property {string} logLevel The log level (off, debug)
+	 * @return {Object}
+	 */
 	get defaults() {
 		const obj = Object.assign({}, super.defaults, {
 			templates: {
@@ -542,10 +542,7 @@ function updateChangesState() {
 			"classes.badge",
 			new TokenList(this.getOption("classes.badge")).add("hidden").toString(),
 		);
-		this[stateButtonElementSymbol].setOption(
-			"disabled",
-			disableWhenNoChanges,
-		);
+		this[stateButtonElementSymbol].setOption("disabled", disableWhenNoChanges);
 		clearInternalDisableTimeout.call(this);
 		return;
 	}
@@ -619,10 +616,7 @@ function updateChangesState() {
 		);
 	} else {
 		this[stateButtonElementSymbol].removeState();
-		this[stateButtonElementSymbol].setOption(
-			"disabled",
-			disableWhenNoChanges,
-		);
+		this[stateButtonElementSymbol].setOption("disabled", disableWhenNoChanges);
 		clearInternalDisableTimeout.call(this);
 		this.setOption("changes", "");
 		this.setOption(

package/source/components/datatable/style/datatable.pcss

@@ -36,7 +36,6 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    overflow-x: auto;
     overflow-y: visible;
     padding: 20px;
     box-sizing: border-box;
@@ -52,6 +51,12 @@
     }
 }
 
+[data-monster-role="table-scroll"] {
+    overflow-x: auto;
+    overflow-y: visible;
+    width: 100%;
+}
+
 :host {
     padding: 0;
     margin: 0;