@lavalogic/scoria 0.37.39 → 0.37.41

package/dist/Components/CollapsibleCard.svelte

@@ -133,8 +133,8 @@ div.content {
 }
 div.content {
   max-height: var(--card-max-height, 100%);
-  overflow: auto;
-  height: var(--card-max-height);
+  height: max-content;
+  min-height: 0;
   opacity: 1;
   width: 100%;
 }

package/dist/Helpers/dropdownPortal.js

@@ -56,6 +56,15 @@ const PORTAL_Z_INDEX = 99998;
  * inside their fixed-height box.
  */
 const FLIP_THRESHOLD_PX = 240;
+/**
+ * Hard cap on the dropdown's open height, regardless of how much
+ * vertical space the trigger leaves between itself and the viewport
+ * edge. Matches Svelecte's own `--sv-dropdown-height` default (320px)
+ * so a typical dropdown opens at a sensible "six rows plus search
+ * input" size and only shrinks below that when the trigger is genuinely
+ * close to the viewport edge.
+ */
+const MAX_DROPDOWN_HEIGHT_PX = 320;
 /** Run a function on the next animation frame, coalescing repeat
  *  calls so we don't queue dozens of layout reads per scroll burst. */
 function rafThrottle(fn) {
@@ -116,16 +125,43 @@ export function attachDropdownPortal(options) {
         dropdown.style.minWidth = `${tr.width}px`;
         dropdown.style.maxWidth = `${tr.width}px`;
         dropdown.style.zIndex = String(PORTAL_Z_INDEX);
+        // Cap the dropdown height at `MAX_DROPDOWN_HEIGHT_PX` regardless
+        // of how much space the trigger has below / above it - we never
+        // want the dropdown to be as tall as the viewport just because
+        // the option list could fit. The `Math.max(..., 64)` floor
+        // stops the dropdown from collapsing to a single-row sliver
+        // when the trigger is genuinely pinned against the viewport
+        // edge; the inner scroll handles the rest.
+        const availableHeightPx = openUp
+            ? Math.min(MAX_DROPDOWN_HEIGHT_PX, Math.max(spaceAbove - 8, 64))
+            : Math.min(MAX_DROPDOWN_HEIGHT_PX, Math.max(spaceBelow - 8, 64));
         if (openUp) {
             dropdown.style.top = '';
             dropdown.style.bottom = `${viewportHeight - tr.top}px`;
-            dropdown.style.maxHeight = `${Math.max(spaceAbove - 8, 64)}px`;
         }
         else {
             dropdown.style.top = `${tr.bottom}px`;
             dropdown.style.bottom = '';
-            dropdown.style.maxHeight = `${Math.max(spaceBelow - 8, 64)}px`;
         }
+        dropdown.style.maxHeight = `${availableHeightPx}px`;
+        // Svelecte's inner `.sv-dropdown-scroll` element has its own
+        // `max-height: var(--sv-dropdown-height, 320px); overflow-y:
+        // auto` rule, AND the outer `.sv_dropdown` element has
+        // `overflow-y: auto` by default. When the trigger is near the
+        // viewport edge our outer `max-height` is forced below 320px,
+        // so both ended up with their own scrollbars (the visible "two
+        // scrollbars stacked" symptom). Two complementary fixes:
+        //   1. Override `--sv-dropdown-height` to match the outer's
+        //      max-height so the inner scroll container shrinks in
+        //      lockstep instead of staying at its 320px default.
+        //   2. Force the outer to `overflow: hidden` so even if the
+        //      inner's actual rendered height nudges a pixel or two
+        //      past the outer's content box (border / padding
+        //      rounding), the outer doesn't sprout its own scrollbar
+        //      on top of the inner's. The inner remains the single
+        //      scroll surface.
+        dropdown.style.setProperty('--sv-dropdown-height', `${availableHeightPx}px`);
+        dropdown.style.overflow = 'hidden';
     };
     const throttled = rafThrottle(reposition);
     const handleScroll = () => {
@@ -162,6 +198,8 @@ export function attachDropdownPortal(options) {
         dropdown.style.maxWidth = '';
         dropdown.style.maxHeight = '';
         dropdown.style.zIndex = '';
+        dropdown.style.overflow = '';
+        dropdown.style.removeProperty('--sv-dropdown-height');
         dropdown.removeAttribute('data-scoria-portal-dropdown');
         if (!dropdown.classList.contains('is-open')) {
             dropdown.style.display = 'none';

package/package.json

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