fix(ui): portal menus to body above the sidedocks

This commit is contained in:
hh
2026-08-09 21:20:01 +02:00
parent 8a609da778
commit 0873cbb366
2 changed files with 23 additions and 3 deletions
+11
View File
@@ -109,6 +109,17 @@
background: var(--background); background: var(--background);
} }
/* Portal layer for menus: a zero-sized anchor at body level, above the sidedocks. */
.bcal-portal {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
background: transparent;
z-index: var(--layer-menu, 65);
}
.bcal-app { .bcal-app {
container-type: inline-size; container-type: inline-size;
display: flex; display: flex;
+12 -3
View File
@@ -18,14 +18,23 @@
let { app, store, settings, component }: Props = $props(); let { app, store, settings, component }: Props = $props();
let root = $state<HTMLElement | null>(null); // Menus hang off body, not off the view: Obsidian's sidedocks paint above the
// leaf, so anything portalled inside it is covered once it crosses a pane edge.
// The layer carries .bcal-root so the theme aliases still reach the popovers.
const layer = document.createElement("div");
layer.className = "bcal-root bcal-portal";
$effect(() => {
document.body.append(layer);
return () => layer.remove();
});
provideView({ provideView({
app, app,
store, store,
settings, settings,
component, component,
portal: () => root as HTMLElement, portal: () => layer,
}); });
let creating = $state(false); let creating = $state(false);
@@ -56,7 +65,7 @@
} }
</script> </script>
<div bind:this={root} class="bcal-root"> <div class="bcal-root">
<div class="bcal-app"> <div class="bcal-app">
{#if !store.railCollapsed} {#if !store.railCollapsed}
<SphereRail /> <SphereRail />