@lavalogic/scoria 0.37.22 → 0.37.24

package/dist/Components/Modal.svelte

@@ -335,7 +335,10 @@ dialog {
 
 .modal-main {
   display: flex;
+  flex-flow: column nowrap;
   flex-grow: 1;
+  overflow-y: auto;
+  min-height: 0;
   padding: 0.75rem;
   background-color: #f4f7f9;
 }

package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte

@@ -24,6 +24,33 @@
 		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
 	);
 
+	/** For Date-typed display columns, expose both the local-time and UTC
+	 *  representations of the raw accessor value as a multi-line tooltip.
+	 *  The cell's body shows the locale-formatted value (via
+	 *  `getDisplayValue`); the title attribute below lets users hover to
+	 *  see Local + UTC side-by-side without expanding the column. */
+	const dateTooltip: string | undefined = $derived.by(() => {
+		if (cell.column.columnDef.filterValueType !== 'Date') {
+			return undefined;
+		}
+		if (value == null || value === '' || value instanceof Promise) {
+			return undefined;
+		}
+		let d: Date | undefined;
+		if (value instanceof Date) {
+			d = value;
+		} else if (typeof value === 'string' || typeof value === 'number') {
+			const parsed = new Date(value);
+			if (!Number.isNaN(parsed.getTime())) {
+				d = parsed;
+			}
+		}
+		if (d == null) {
+			return undefined;
+		}
+		return `Local: ${d.toLocaleString()}\nUTC: ${d.toUTCString()}`;
+	});
+
 	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
 
 	const options: Array<SelectOption<unknown>> = $derived(
@@ -106,6 +133,7 @@
 	class:has-modal={!!modalComponent}
 	tabIndex={hasValue ? 0 : undefined}
 	class="focusable"
+	title={dateTooltip}
 	style={focusDetails.outline}
 	class:multifocus={hasValue && focusDetails.isMultiFocused}
 	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}

package/dist/Components/Table/ColumnFactory.svelte.js

@@ -325,26 +325,33 @@ export function createColumnFactory() {
                             : opts.filterValueType === 'String'
                                 ? 'text'
                                 : 'display';
-            // When the consumer flagged the column as a Date filter, auto-
-            // format the displayed value via `toLocaleString` so timestamps
-            // surface in the user's locale rather than the raw ISO 8601
-            // payload returned by the server. Promise / scalar / null
-            // inputs are all handled. Filter / sort logic still operates
-            // on the raw accessor value below.
+            // For Date-typed display columns, leave the accessor returning
+            // the raw Date / ISO string (filter / sort logic still operates
+            // on the raw value) and surface the formatted local-time
+            // string via `getDisplayValue`. The cell renders
+            // `getDisplayValue` for visible text and reads the raw value
+            // from `accessorFn` to compose the hover tooltip showing both
+            // the local-time and UTC representations.
             const rawValue = opts.value;
-            const valueAccessor = opts.filterValueType === 'Date'
+            const valueAccessor = rawValue;
+            const dateDisplayValue = opts.filterValueType === 'Date'
                 ? (row, index) => {
                     const v = rawValue(row, index);
                     if (v instanceof Promise) {
-                        return v.then(formatLocaleDate);
+                        return v.then((resolved) => {
+                            const formatted = formatLocaleDate(resolved);
+                            return formatted == null ? null : String(formatted);
+                        });
                     }
-                    return formatLocaleDate(v);
+                    const formatted = formatLocaleDate(v);
+                    return formatted == null ? null : String(formatted);
                 }
-                : rawValue;
+                : undefined;
             const def = new DisplayDef({
                 id,
                 ...commonProps(opts, inferredKind),
                 accessorFn: valueAccessor,
+                getDisplayValue: dateDisplayValue,
                 modal: opts.modal,
                 // Display columns have no implicit filter type (unlike the
                 // typed kinds where the factory pins one based on the

package/dist/Components/Table/Misc/TableFooter.svelte

@@ -359,6 +359,7 @@
   --button-padding-vertical: 0.42rem;
 }
 .spread_row .block.records-per-page {
+  --input-min-width: 3.5rem;
   --input-width: 3.5rem;
 }
 .spread_row span,

package/dist/Helpers/dropdownPortal.js

@@ -146,7 +146,16 @@ export function attachDropdownPortal(options) {
         }
         originalParent = dropdown.parentNode;
         originalNextSibling = dropdown.nextSibling;
-        document.body.appendChild(dropdown);
+        // Append the dropdown to the nearest open native `<dialog>` ancestor
+        // when one exists, otherwise to `document.body`. A `<dialog>` opened
+        // via `showModal()` renders in the browser's top layer, which sits
+        // above every z-indexed element in the regular stacking context.
+        // Without this hop the dropdown's `z-index: 10000` was still painted
+        // behind the dialog backdrop and its content (the symptom that
+        // surfaced as "select options disappear behind the allocate modal").
+        const dialogHost = trigger.closest('dialog');
+        const portalTarget = dialogHost && dialogHost.open ? dialogHost : document.body;
+        portalTarget.appendChild(dropdown);
         // Tag the teleported dropdown so any "click outside the
         // panel" / "click outside the trigger" handler elsewhere in
         // the codebase can recognise the dropdown as a logical

package/dist/scss/_mixins.scss

@@ -633,8 +633,13 @@
 
 	.modal-main {
 		display: flex;
+		flex-flow: column nowrap;
 		flex-grow: 1;
-		// overflow-y: auto;
+		// `overflow-y: auto` is the default for the modal body so long
+		// content (form fields, lists, etc.) scrolls inside the modal
+		// rather than pushing the footer buttons out of the viewport.
+		overflow-y: auto;
+		min-height: 0;
 		padding: sizing.$half-padding;
 		background-color: colours.$ui-blue-1;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.22",
+  "version": "0.37.24",
   "publishConfig": {
     "access": "restricted"
   },