diff --git a/webui/src/lib/components/BrowseColumn.svelte b/webui/src/lib/components/BrowseColumn.svelte index a0311e4..612878e 100644 --- a/webui/src/lib/components/BrowseColumn.svelte +++ b/webui/src/lib/components/BrowseColumn.svelte @@ -138,7 +138,7 @@ .view { display: flex; - z-index: 10; + z-index: 1; 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 b5ad4b5..b7dd700 100644 --- a/webui/src/lib/components/utils/Selector.svelte +++ b/webui/src/lib/components/utils/Selector.svelte @@ -92,6 +92,7 @@ import { i18n } from '$lib/i18n'; import debug from 'debug'; import Spinner from './Spinner.svelte'; + import bodyPortal from '$lib/util/bodyPortal'; const dispatch = createEventDispatcher<{ input: SelectorValue | undefined; @@ -471,14 +472,7 @@ $: dbg('%o focus = %s, hover = %s, visible = %s', selectorEl, inputFocused, hover, visible); -
+
{#if current?.t === 'Address' && inputValue.length > 0}
@@ -505,6 +499,11 @@ on:mouseenter={() => (hover = true)} on:mouseleave={() => (hover = false)} bind:this={listEl} + use:bodyPortal + style="--options-top: {optionsTop}; + --options-left: {optionsLeft}; + --options-width: {optionsWidth}; + --options-max-height: {optionsMaxHeight}" > {#if updating}
  • @@ -585,7 +584,7 @@ visibility: hidden; z-index: 99; - position: fixed; + position: absolute; top: var(--options-top); left: var(--options-left); width: max(var(--options-width), 12em); diff --git a/webui/src/lib/util/bodyPortal.ts b/webui/src/lib/util/bodyPortal.ts new file mode 100644 index 0000000..871f92b --- /dev/null +++ b/webui/src/lib/util/bodyPortal.ts @@ -0,0 +1,9 @@ +export default function bodyPortal(node: HTMLElement) { + document.body.appendChild(node); + + return { + destroy() { + node.remove(); + } + }; +}