From a7105267ede0180382592a279d7aed2cc0821c4e Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 04:05:18 +0100
Subject: [PATCH] fix(base): keep inline embed left edge at page-content,
 extend right only
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removing the leftward extension. With negative margin-left, the
grid grew leftward past page-content and the first column appeared
near the sidebar edge on load — wrong; Notion keeps the first column
aligned with page text. Drop margin-left and the extendLeft
calculation; only extend rightward toward AppShell.Main's right edge.

Leftward viewport extension (so frozen columns can lock at the
sidebar edge during scroll) becomes meaningful once we add frozen
columns. Deferred until that feature lands.
---
 .../features/base/components/base-table.tsx   | 12 +++++------
 .../components/base-embed/base-embed-view.tsx | 20 ++++++++-----------
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/features/base/components/base-table.tsx b/apps/client/src/features/base/components/base-table.tsx
index ab7f2508b..6dc00aa78 100644
--- a/apps/client/src/features/base/components/base-table.tsx
+++ b/apps/client/src/features/base/components/base-table.tsx
@@ -315,14 +315,14 @@ export function BaseTable({ pageId, embedded }: BaseTableProps) {
   if (!base) return null;
 
   // When embedded inline in a doc page, the parent <NodeViewWrapper>
-  // exposes --embed-extend-l / --embed-extend-r (positive px values).
-  // We pull the grid's left/right edges outward via negative margin —
-  // box-model: width: auto becomes parent_width + extend, so the box
-  // physically grows past its parent's bounds. The toolbar keeps the
-  // parent-constrained width so it stays in line with the page text.
+  // exposes --embed-extend-r (positive px). We pull the grid's right
+  // edge outward via negative margin-right — box-model: width: auto
+  // becomes parent_width + |margin|, so the box physically grows past
+  // its parent's bounds. Left edge stays at the wrapper's natural
+  // (page-content) position so the table aligns with page text on
+  // load. Toolbar is unchanged.
   const gridExtendStyle = embedded
     ? ({
-        marginLeft: "calc(-1 * var(--embed-extend-l, 0px))",
         marginRight: "calc(-1 * var(--embed-extend-r, 0px))",
       } as const)
     : undefined;
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 913d29260..4922aad1c 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
@@ -6,26 +6,22 @@ import { useBaseQuery } from "@/features/base/queries/base-query";
 
 const SIDE_GUTTER = 8;
 
-// 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.
+// Extend the grid only to the right — toward AppShell.Main's right
+// edge. The left edge stays at the wrapper's natural (page-content)
+// position so the table is visually aligned with the page text on
+// load, matching Notion. Leftward scroll-viewport extension is only
+// meaningful once we add frozen columns that need to lock at the
+// sidebar edge; deferred until then.
 function applyExtension(wrapper: HTMLDivElement) {
   const rect = wrapper.getBoundingClientRect();
   if (rect.width === 0) return;
 
   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
+  const targetRight = main
+    ? main.getBoundingClientRect().right - SIDE_GUTTER
     : window.innerWidth - SIDE_GUTTER;
 
-  const extendLeft = Math.max(0, rect.left - targetLeft);
   const extendRight = Math.max(0, targetRight - rect.right);
-
-  wrapper.style.setProperty("--embed-extend-l", `${extendLeft}px`);
   wrapper.style.setProperty("--embed-extend-r", `${extendRight}px`);
 }