inviton-powerduck 0.0.204 → 0.0.206

package/common/scroll-utils.ts

@@ -21,11 +21,54 @@ export default class ScrollUtils {
 					(PowerduckState as any)._lastValidationScroll = now;
 				}
 
-				this.scrollToElem(scrollContext.first()[0]);
+				ScrollUtils.scrollIntoViewWithOffset(
+					scrollContext.first()[0],
+					10,
+					'smooth',
+				);
 			}
 		}, 10);
 	}
 
+	static scrollIntoViewWithOffset(
+		elem,
+		offset = 0,
+		behavior: ScrollBehavior = 'smooth',
+	) {
+		if (!elem) {
+			return;
+		}
+
+		// Find the nearest scrollable parent
+		let scrollParent = elem.parentElement;
+		while (scrollParent) {
+			const overflowY = getComputedStyle(scrollParent).overflowY;
+			if (overflowY === 'auto' || overflowY === 'scroll') {
+				break;
+			}
+
+			scrollParent = scrollParent.parentElement;
+		}
+
+		// Fallback to window scroll if no scrollable parent
+		if (!scrollParent) {
+			const elemTop = elem.getBoundingClientRect().top + window.pageYOffset;
+			window.scrollTo({
+				top: elemTop - offset,
+				behavior,
+			});
+		} else {
+			const parentRect = scrollParent.getBoundingClientRect();
+			const elemRect = elem.getBoundingClientRect();
+			const top = elemRect.top - parentRect.top + scrollParent.scrollTop;
+
+			scrollParent.scrollTo({
+				top: top - offset,
+				behavior,
+			});
+		}
+	}
+
 	/**
 	 * Scrolls to element
 	 * @param elem

package/components/datatable/datatable.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable node/handle-callback-err */
+/* eslint-disable no-new */
+/* eslint-disable ts/no-this-alias */
 import type { Temporal } from '@js-temporal/polyfill';
 import type { IWebApiClient, WebClientApiMethod } from '../../common/IWebClient';
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
@@ -350,6 +353,7 @@ export class DataTableFilterItemCollection extends Array<DataTableFilterItem> {
 
 export class DataTableConfig {
 	static filterMarking = true;
+	static defaultMobileBehavior = DataTableMobileBehavior.MobileLayout;
 }
 
 @Component
@@ -542,7 +546,6 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 
 		if (!this.initialized && !this.initDataLoaded) {
 			this.initDataLoaded = true;
-			const self = this;
 			this.reloadDataPromise().then(() => {
 				setTimeout(() => {
 					this.initialized = true;
@@ -1813,7 +1816,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 	}
 
 	getMobileBehavior(): DataTableMobileBehavior {
-		return this.currentMobileBehavior || DataTableMobileBehavior.MobileLayout;
+		return this.currentMobileBehavior ?? DataTableConfig.defaultMobileBehavior;
 	}
 
 	getVisibleColumns(): TableColumn[] {

package/components/modal/css/modal.css

@@ -9,34 +9,34 @@
 	padding-bottom: 20px;
 }
 
-.modal-header.modal-has-headericon > h5 {
+.modal-header.modal-has-headericon>h5 {
 	display: flex;
 	width: 100%;
 	min-height: 60px;
 	align-items: center;
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon {
+.modal-header.modal-has-headericon>.modal-header-icon {
 	position: absolute;
 	top: 0;
 	left: 22px;
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon .swal2-transform-resize {
+.modal-header.modal-has-headericon>.modal-header-icon .swal2-transform-resize {
 	transform: scale(0.75);
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon .swal2-transform-resize.swal2-icon,
-.modal-header.modal-has-headericon > .modal-header-icon .swal2-transform-resize .swal2-icon {
+.modal-header.modal-has-headericon>.modal-header-icon .swal2-transform-resize.swal2-icon,
+.modal-header.modal-has-headericon>.modal-header-icon .swal2-transform-resize .swal2-icon {
 	margin-top: 10px;
 	margin-left: -10px;
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon .swal2-transform-resize .success-icon-stub {
+.modal-header.modal-has-headericon>.modal-header-icon .swal2-transform-resize .success-icon-stub {
 	border-color: #b9f0b7;
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon .swal2-standard-resize {
+.modal-header.modal-has-headericon>.modal-header-icon .swal2-standard-resize {
 	font-size: 40px;
 	line-height: 60px;
 	text-align: center;
@@ -44,7 +44,7 @@
 	height: 60px;
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon > .swal2-icon {
+.modal-header.modal-has-headericon>.modal-header-icon>.swal2-icon {
 	overflow: hidden;
 }
 
@@ -73,6 +73,9 @@
 	.modal-bottom-sheet .modal-dialog .modal-content {
 		border-top-left-radius: 16px;
 		border-top-right-radius: 16px;
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+		max-height: calc(100dvh - 10px);
 		padding-top: 0;
 	}
 
@@ -124,7 +127,6 @@
 	}
 
 	.modal.modal-bottom-sheet .modal-body {
-		max-height: 80vh;
 		overflow: auto;
 	}
 
@@ -148,4 +150,4 @@
 		z-index: 1;
 		background: inherit;
 	}
-}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.204",
+	"version": "0.0.206",
 	"files": [
 		"app/",
 		"common/",