fix(webui): Browse column no longer displays over Footer

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);

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);
 </script>
 
-<div
+<div class="selector" bind:this={selectorEl}>
-	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">
@@ -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}
 			<li><Spinner centered /></li>
@@ -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);

webui/src/lib/util/bodyPortal.ts

@@ -0,0 +1,9 @@
+export default function bodyPortal(node: HTMLElement) {
+	document.body.appendChild(node);
+
+	return {
+		destroy() {
+			node.remove();
+		}
+	};
+}