From 0873cbb3664f0f569e505ed664180b760b12ef9f Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Sun, 9 Aug 2026 21:20:01 +0200
Subject: [PATCH] fix(ui): portal menus to body above the sidedocks

---
 src/tailwind.css  | 11 +++++++++++
 src/ui/app.svelte | 15 ++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/tailwind.css b/src/tailwind.css
index 1ab7d17..fef5a32 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -109,6 +109,17 @@
   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 {
   container-type: inline-size;
   display: flex;
diff --git a/src/ui/app.svelte b/src/ui/app.svelte
index 2405c8a..9fe7fd2 100644
--- a/src/ui/app.svelte
+++ b/src/ui/app.svelte
@@ -18,14 +18,23 @@
 
   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({
     app,
     store,
     settings,
     component,
-    portal: () => root as HTMLElement,
+    portal: () => layer,
   });
 
   let creating = $state(false);
@@ -56,7 +65,7 @@
   }
 </script>
 
-<div bind:this={root} class="bcal-root">
+<div class="bcal-root">
   <div class="bcal-app">
     {#if !store.railCollapsed}
       <SphereRail />