From 67f45ee61b6be518380bf315bae344d9d206bdff Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 03:57:45 +0100
Subject: [PATCH] fix(base): anchor inline embed extension to AppShell main,
 not first wider parent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The findWiderAncestor walk often stopped at a slightly-larger
intermediate (NodeViewWrapper, drag-handle wrapper, etc.) whose
left edge was almost the same as the wrapper's, so the leftward
extension came out as ~0 and the grid only grew to the right.

Use closest('main') instead — that's AppShell.Main, the layout
container whose bounds already reflect the navbar width and
sidebar collapse state. Both sides now extend to its edges.
---
 .../components/base-embed/base-embed-view.tsx | 54 +++++++------------
 1 file changed, 18 insertions(+), 36 deletions(-)

diff --git a/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx b/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
index ab3321971..913d29260 100644
--- a/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
+++ b/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
@@ -4,40 +4,29 @@ import { useEffect, useRef } from "react";
 import { BaseTable } from "@/features/base/components/base-table";
 import { useBaseQuery } from "@/features/base/queries/base-query";
 
-const RIGHT_GUTTER = 16;
-const LEFT_GUTTER = 8;
+const SIDE_GUTTER = 8;
 
-// Measure how far we can extend the grid past the wrapper's natural
-// (parent-constrained) bounds, and write the values as CSS vars on the
-// wrapper so the descendant grid can consume them via margin.
+// Anchor directly to AppShell.Main (the <main> tag) for both sides.
+// This is the layout container that already accounts for the navbar's
+// width and sidebar collapse state — its left/right edges are exactly
+// where the embed should extend to.
 function applyExtension(wrapper: HTMLDivElement) {
   const rect = wrapper.getBoundingClientRect();
   if (rect.width === 0) return;
 
-  const extendRight = Math.max(
-    0,
-    window.innerWidth - rect.right - RIGHT_GUTTER,
-  );
+  const main = wrapper.closest("main") as HTMLElement | null;
+  const mainRect = main?.getBoundingClientRect();
+
+  const targetLeft = (mainRect?.left ?? 0) + SIDE_GUTTER;
+  const targetRight = mainRect
+    ? mainRect.right - SIDE_GUTTER
+    : window.innerWidth - SIDE_GUTTER;
 
-  // Find the leftmost the grid can reach: walk up the ancestor chain
-  // for the closest element wider than the wrapper. That ancestor's
-  // left edge (plus a small gutter) is our left target. This handles
-  // the sidebar-collapsed case naturally — the wider ancestor is
-  // AppShell.Main, whose left edge moves when the sidebar toggles.
-  let targetLeft = rect.left;
-  let cur: HTMLElement | null = wrapper.parentElement;
-  while (cur && cur !== document.body) {
-    const r = cur.getBoundingClientRect();
-    if (r.width > rect.width + 32) {
-      targetLeft = r.left + LEFT_GUTTER;
-      break;
-    }
-    cur = cur.parentElement;
-  }
   const extendLeft = Math.max(0, rect.left - targetLeft);
+  const extendRight = Math.max(0, targetRight - rect.right);
 
-  wrapper.style.setProperty("--embed-extend-r", `${extendRight}px`);
   wrapper.style.setProperty("--embed-extend-l", `${extendLeft}px`);
+  wrapper.style.setProperty("--embed-extend-r", `${extendRight}px`);
 }
 
 export function BaseEmbedView({ node }: NodeViewProps) {
@@ -54,17 +43,10 @@ export function BaseEmbedView({ node }: NodeViewProps) {
 
     const ro = new ResizeObserver(update);
     ro.observe(wrapper);
-    // Also observe an ancestor so sidebar collapse / window changes
-    // propagate even when the wrapper itself doesn't resize.
-    let cur: HTMLElement | null = wrapper.parentElement;
-    while (cur && cur !== document.body) {
-      const r = cur.getBoundingClientRect();
-      if (r.width > wrapper.getBoundingClientRect().width + 32) {
-        ro.observe(cur);
-        break;
-      }
-      cur = cur.parentElement;
-    }
+    // Sidebar collapse changes <main>'s left/width without resizing
+    // the wrapper itself, so observe <main> too.
+    const main = wrapper.closest("main");
+    if (main) ro.observe(main);
 
     window.addEventListener("resize", update);
     return () => {