@joewinke/jatui 0.8.4 → 0.8.5

package/dist/components/SearchDropdown.svelte

@@ -197,6 +197,35 @@
 		}
 	}
 
+	function positionPanel() {
+		if (!triggerRef) return;
+		const rect = triggerRef.getBoundingClientRect();
+		const width = Math.max(rect.width, 192);
+		// Viewport-aware flip: if there isn't room below the trigger but there
+		// is above, anchor the panel to the trigger's top and grow upward. This
+		// keeps the panel on-screen for rows near the bottom of a scroll area
+		// (e.g. suggested-task rows in the completed-session overlay).
+		const estPanelHeight = 300;
+		const spaceBelow = window.innerHeight - rect.bottom;
+		const spaceAbove = rect.top;
+		const flipUp = spaceBelow < estPanelHeight && spaceAbove > spaceBelow;
+		// Clamp left so a right-edge trigger doesn't push the panel off-screen.
+		const left = Math.max(8, Math.min(rect.left, window.innerWidth - width - 8));
+		// .sd-panel's class rule always sets `top: 100%`, so each branch must
+		// explicitly reset the property it isn't using — otherwise the flip-up
+		// branch ends up with both top (100% = viewport height) and bottom set
+		// while height is auto, which over-constrains to a negative (clamped
+		// to 0) height and the whole panel silently renders invisible.
+		const vertical = flipUp
+			? `bottom: ${window.innerHeight - rect.top + 4}px; top: auto;`
+			: `top: ${rect.bottom + 4}px; bottom: auto;`;
+		// min-width override is required: .sd-panel's class rule sets
+		// `min-width: max(100%, 14rem)`, and for a position:fixed element
+		// that 100% resolves against the viewport, not the trigger — without
+		// this override the panel balloons to ~100vw wide.
+		panelStyle = `position: fixed; z-index: 9999; ${vertical} left: ${left}px; width: ${width}px; min-width: ${width}px; margin-top: 0;`;
+	}
+
 	$effect(() => {
 		if (embedded) {
 			tick().then(() => { searchInput?.focus(); scrollHighlightedIntoView(); });
@@ -204,31 +233,26 @@
 		}
 		if (open) {
 			if (appendToBody && triggerRef) {
-				const rect = triggerRef.getBoundingClientRect();
-				const width = Math.max(rect.width, 192);
-				// Viewport-aware flip: if there isn't room below the trigger but there
-				// is above, anchor the panel to the trigger's top and grow upward. This
-				// keeps the panel on-screen for rows near the bottom of a scroll area
-				// (e.g. suggested-task rows in the completed-session overlay).
-				const estPanelHeight = 300;
-				const spaceBelow = window.innerHeight - rect.bottom;
-				const spaceAbove = rect.top;
-				const flipUp = spaceBelow < estPanelHeight && spaceAbove > spaceBelow;
-				// Clamp left so a right-edge trigger doesn't push the panel off-screen.
-				const left = Math.max(8, Math.min(rect.left, window.innerWidth - width - 8));
-				// .sd-panel's class rule always sets `top: 100%`, so each branch must
-				// explicitly reset the property it isn't using — otherwise the flip-up
-				// branch ends up with both top (100% = viewport height) and bottom set
-				// while height is auto, which over-constrains to a negative (clamped
-				// to 0) height and the whole panel silently renders invisible.
-				const vertical = flipUp
-					? `bottom: ${window.innerHeight - rect.top + 4}px; top: auto;`
-					: `top: ${rect.bottom + 4}px; bottom: auto;`;
-				// min-width override is required: .sd-panel's class rule sets
-				// `min-width: max(100%, 14rem)`, and for a position:fixed element
-				// that 100% resolves against the viewport, not the trigger — without
-				// this override the panel balloons to ~100vw wide.
-				panelStyle = `position: fixed; z-index: 9999; ${vertical} left: ${left}px; width: ${width}px; min-width: ${width}px; margin-top: 0;`;
+				positionPanel();
+				// A position:fixed panel is anchored to the VIEWPORT, so without this it
+				// stays put while the page scrolls and appears to follow the reader down
+				// the page (Joe UAT 2026-09-25). Re-anchor on every scroll (capture: any
+				// scroll container) and resize; close once the trigger leaves the view.
+				const reanchor = (e?: Event) => {
+					if (e && e.target instanceof Node && containerRef?.contains(e.target)) return;
+					const r = triggerRef?.getBoundingClientRect();
+					if (!r || r.bottom < 0 || r.top > window.innerHeight) { open = false; searchQuery = ''; return; }
+					positionPanel();
+				};
+				window.addEventListener('scroll', reanchor, { capture: true, passive: true });
+				window.addEventListener('resize', reanchor, { passive: true });
+				document.addEventListener('mousedown', handleClickOutside);
+				tick().then(() => { searchInput?.focus(); scrollHighlightedIntoView(); });
+				return () => {
+					window.removeEventListener('scroll', reanchor, { capture: true });
+					window.removeEventListener('resize', reanchor);
+					document.removeEventListener('mousedown', handleClickOutside);
+				};
 			}
 			document.addEventListener('mousedown', handleClickOutside);
 			tick().then(() => { searchInput?.focus(); scrollHighlightedIntoView(); });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",