@lavalogic/scoria 0.37.21 → 0.37.23

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/ActionsCell.svelte

@@ -122,16 +122,24 @@
 		class:multifocus-start={focusDetails.isMultiFocusStart}
 		bind:this={cellRef}
 		onmousedown={(e) => {
-			// Stop the browser's default mousedown -> focus side effect
-			// on the inner Action button. The default focus call
-			// implicitly calls `scrollIntoView` against the button (which
-			// sits inside a sticky right-pinned cell whose layout position
-			// is at the far right end of the row), causing the table to
-			// jump horizontally on every click of the ellipsis menu. We
-			// still want focus / activation behaviour, so the click handler
-			// on the Action proper handles the popup toggle and the outer
-			// `.focusable` cell handler manages the focus state.
+			// Suppress the click-side effects that cause the table to
+			// jump horizontally on Action button clicks:
+			//   1. `preventDefault()` cancels the browser's default
+			//      mousedown -> focus on the inner `<button>`, which
+			//      otherwise calls `scrollIntoView` against the button's
+			//      underlying position (far right of the row, since the
+			//      Actions column is sticky-pinned right).
+			//   2. `stopPropagation()` keeps the event out of the outer
+			//      `.focusable` cell handler, which would otherwise call
+			//      `tableContext.startFocus(...)` and trigger Table.svelte's
+			//      focusStart $effect -> another `scrollIntoView`. Even
+			//      with the pinned-cell-skip in that effect, focus state
+			//      changes feed back into other scroll-restore paths.
+			// The Action's own `onclick` fires regardless (click is dispatched
+			// on mouseup independent of mousedown handling), so the popup
+			// toggle still works.
 			e.preventDefault();
+			e.stopPropagation();
 		}}
 	>
 		<!-- TODO {isMultiFocusStart} -->

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

@@ -349,20 +349,18 @@
   --input-width: 4rem;
   --input-border: none;
 }
-.spread_row .records-per-page {
-  --input-width: 4.5rem;
-  padding: 0 0.5rem;
-  gap: 0.375rem;
-}
-.spread_row .records-per-page.nopad {
+.spread_row .block.nopad {
   padding: 0;
   --button-padding-horizontal: 1rem;
   --button-padding-vertical: 0.56rem;
 }
-.spread_row .records-per-page.nopad.page-arrow {
+.spread_row .block.nopad.page-arrow {
   --button-padding-horizontal: 0.6rem;
   --button-padding-vertical: 0.42rem;
 }
+.spread_row .block.records-per-page {
+  --input-width: 2.75rem;
+}
 .spread_row span,
 .spread_row label {
   white-space: nowrap;

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.21",
+  "version": "0.37.23",
   "publishConfig": {
     "access": "restricted"
   },