fix(webui): Browse column no longer displays over Footer
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
This commit is contained in:
parent
04d9f37372
commit
b3796d362c
3 changed files with 18 additions and 10 deletions
|
@ -138,7 +138,7 @@
|
||||||
.view {
|
.view {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
z-index: 10;
|
z-index: 1;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: var(--width);
|
min-width: var(--width);
|
||||||
max-width: var(--width);
|
max-width: var(--width);
|
||||||
|
|
|
@ -92,6 +92,7 @@
|
||||||
import { i18n } from '$lib/i18n';
|
import { i18n } from '$lib/i18n';
|
||||||
import debug from 'debug';
|
import debug from 'debug';
|
||||||
import Spinner from './Spinner.svelte';
|
import Spinner from './Spinner.svelte';
|
||||||
|
import bodyPortal from '$lib/util/bodyPortal';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher<{
|
const dispatch = createEventDispatcher<{
|
||||||
input: SelectorValue | undefined;
|
input: SelectorValue | undefined;
|
||||||
|
@ -471,14 +472,7 @@
|
||||||
$: dbg('%o focus = %s, hover = %s, visible = %s', selectorEl, inputFocused, hover, visible);
|
$: dbg('%o focus = %s, hover = %s, visible = %s', selectorEl, inputFocused, hover, visible);
|
||||||
</script>
|
</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}
|
{#if current?.t === 'Address' && inputValue.length > 0}
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
|
@ -505,6 +499,11 @@
|
||||||
on:mouseenter={() => (hover = true)}
|
on:mouseenter={() => (hover = true)}
|
||||||
on:mouseleave={() => (hover = false)}
|
on:mouseleave={() => (hover = false)}
|
||||||
bind:this={listEl}
|
bind:this={listEl}
|
||||||
|
use:bodyPortal
|
||||||
|
style="--options-top: {optionsTop};
|
||||||
|
--options-left: {optionsLeft};
|
||||||
|
--options-width: {optionsWidth};
|
||||||
|
--options-max-height: {optionsMaxHeight}"
|
||||||
>
|
>
|
||||||
{#if updating}
|
{#if updating}
|
||||||
<li><Spinner centered /></li>
|
<li><Spinner centered /></li>
|
||||||
|
@ -585,7 +584,7 @@
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: fixed;
|
position: absolute;
|
||||||
top: var(--options-top);
|
top: var(--options-top);
|
||||||
left: var(--options-left);
|
left: var(--options-left);
|
||||||
width: max(var(--options-width), 12em);
|
width: max(var(--options-width), 12em);
|
||||||
|
|
9
webui/src/lib/util/bodyPortal.ts
Normal file
9
webui/src/lib/util/bodyPortal.ts
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
export default function bodyPortal(node: HTMLElement) {
|
||||||
|
document.body.appendChild(node);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.remove();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
Loading…
Reference in a new issue