@lavalogic/scoria 0.37.22 → 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/Misc/TableFooter.svelte

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

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.23",
   "publishConfig": {
     "access": "restricted"
   },