From 8cefc54552930a820efa182284647f338b2ba1f6 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Sat, 29 Aug 2026 19:21:18 +0200
Subject: [PATCH] fix(view): pad the panel by the status bar overlap so the
 composer stays clear

---
 src/tailwind.css |  2 ++
 src/view.ts      | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/tailwind.css b/src/tailwind.css
index 334fa83..7683602 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -112,7 +112,9 @@
 }
 
 .beaver-root {
+  box-sizing: border-box;
   height: 100%;
+  padding-bottom: var(--beaver-inset-bottom, 0px);
   font-family: var(--font-interface);
   font-size: var(--text-sm);
   color: var(--foreground);
diff --git a/src/view.ts b/src/view.ts
index d9e349e..1ba8ae9 100644
--- a/src/view.ts
+++ b/src/view.ts
@@ -75,12 +75,31 @@ export class PanelView extends ItemView {
         }
       })
     );
+    this.registerEvent(this.app.workspace.on("resize", () => this.inset()));
+    this.registerEvent(
+      this.app.workspace.on("layout-change", () => this.inset())
+    );
     this.follow(this.app.workspace.getActiveFile());
     this.plugin.views.add(this);
     this.mountApp();
+    requestAnimationFrame(() => this.inset());
     return Promise.resolve();
   }
 
+  // Obsidian's status bar floats over the bottom-right of the workspace; a
+  // leaf that reaches down there gets padding so the composer stays clear.
+  private inset(): void {
+    const bar = document.querySelector<HTMLElement>(".status-bar");
+    const box = this.contentEl.getBoundingClientRect();
+    let overlap = 0;
+    if (bar && box.height > 0) {
+      const b = bar.getBoundingClientRect();
+      const crosses = b.left < box.right && b.right > box.left;
+      overlap = crosses ? Math.max(0, box.bottom - b.top) : 0;
+    }
+    this.contentEl.style.setProperty("--beaver-inset-bottom", `${overlap}px`);
+  }
+
   async onClose(): Promise<void> {
     this.plugin.views.delete(this);
     await this.unmountApp();