fix(view): pad the panel by the status bar overlap so the composer stays clear

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

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