From 448fa1a4408ace7ecee932b026f63cd14ca6218b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 14 Jul 2024 11:37:25 +0200
Subject: [PATCH] fix(webui): Selector options appear above everything

---
 webui/src/lib/components/BrowseColumn.svelte  |  2 +-
 .../src/lib/components/utils/Selector.svelte  | 34 +++++++++++++++----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/webui/src/lib/components/BrowseColumn.svelte b/webui/src/lib/components/BrowseColumn.svelte
index 612878e..a0311e4 100644
--- a/webui/src/lib/components/BrowseColumn.svelte
+++ b/webui/src/lib/components/BrowseColumn.svelte
@@ -138,7 +138,7 @@
 	.view {
 		display: flex;
 
-		z-index: 1;
+		z-index: 10;
 		flex-direction: column;
 		min-width: var(--width);
 		max-width: var(--width);
diff --git a/webui/src/lib/components/utils/Selector.svelte b/webui/src/lib/components/utils/Selector.svelte
index 738b8a6..b5ad4b5 100644
--- a/webui/src/lib/components/utils/Selector.svelte
+++ b/webui/src/lib/components/utils/Selector.svelte
@@ -309,6 +309,19 @@
 
 	$: dbg('%o Options: %O', selectorEl, options);
 
+	let optionsTop = '0';
+	let optionsLeft = '0';
+	let optionsWidth = '0';
+	let optionsMaxHeight = 'auto';
+
+	$: if (visible) {
+		const rect = selectorEl.getBoundingClientRect();
+		optionsTop = rect.bottom + window.scrollY + 4 + 'px';
+		optionsLeft = rect.left + window.scrollX + 'px';
+		optionsWidth = rect.width + 'px';
+		optionsMaxHeight = window.innerHeight - rect.bottom - 4 * 3 + 'px';
+	}
+
 	$: {
 		if (inputFocused) {
 			updateOptions(inputValue, true);
@@ -458,7 +471,14 @@
 	$: dbg('%o focus = %s, hover = %s, visible = %s', selectorEl, inputFocused, hover, visible);
 </script>
 
-<div class="selector" bind:this={selectorEl}>
+<div
+	class="selector"
+	bind:this={selectorEl}
+	style="--options-top: {optionsTop};
+	       --options-left: {optionsLeft};
+	       --options-width: {optionsWidth};
+	       --options-max-height: {optionsMaxHeight}"
+>
 	{#if current?.t === 'Address' && inputValue.length > 0}
 		<div class="input">
 			<div class="label">
@@ -552,10 +572,6 @@
 <style lang="scss">
 	@use '../../styles/colors';
 
-	.selector {
-		position: relative;
-	}
-
 	.input {
 		display: flex;
 		min-width: 0;
@@ -569,10 +585,14 @@
 		visibility: hidden;
 
 		z-index: 99;
-		position: absolute;
-		width: 100%;
+		position: fixed;
+		top: var(--options-top);
+		left: var(--options-left);
+		width: max(var(--options-width), 12em);
+		max-height: var(--options-max-height);
 		margin: 2px 0 0;
 		padding: 0;
+		overflow-y: scroll;
 		border: 1px solid var(--foreground-lighter);
 		border-radius: 4px;
 		background: var(--background);