From 00e9d1d724f5cedc1d483e1be1adf14fb1585c84 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 04:44:47 +0100
Subject: [PATCH] feat(base): add right-side scroll headroom on inline embed
 grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mirror the leftward padding with --embed-grid-pad-right = extendRight,
applied as padding-right on .grid. The user can now pan past the last
column into empty space — same shape as Notion's behavior. Standalone
full-page bases are unaffected (var unset → 0).
---
 apps/client/src/features/base/styles/grid.module.css          | 4 ++++
 .../features/editor/components/base-embed/base-embed-view.tsx | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/apps/client/src/features/base/styles/grid.module.css b/apps/client/src/features/base/styles/grid.module.css
index ed62b210e..88b09ecdb 100644
--- a/apps/client/src/features/base/styles/grid.module.css
+++ b/apps/client/src/features/base/styles/grid.module.css
@@ -29,6 +29,10 @@
    * scrollable region — the user can pan left into it. Standalone
    * full-page bases never set the var, so it's a no-op there. */
   padding-left: var(--embed-grid-pad-left, 0);
+  /* Symmetric right-side padding lets the user scroll past the last
+   * column into empty space, so wide tables don't end abruptly at
+   * the viewport edge. */
+  padding-right: var(--embed-grid-pad-right, 0);
 }
 
 .headerRow {
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 8bd81bba6..9b87092b1 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
@@ -28,6 +28,10 @@ function applyExtension(wrapper: HTMLDivElement) {
   wrapper.style.setProperty("--embed-extend-l", `${extendLeft}px`);
   wrapper.style.setProperty("--embed-extend-r", `${extendRight}px`);
   wrapper.style.setProperty("--embed-grid-pad-left", `${extendLeft}px`);
+  // Symmetric right-side padding so the user can pan past the last
+  // column into empty space — same behaviour as Notion, gives the
+  // table breathing room on the right when scrolled fully right.
+  wrapper.style.setProperty("--embed-grid-pad-right", `${extendRight}px`);
   // Drop the standalone "panel" frame: inline databases read as part
   // of the document, with only cell separators as gridlines.
   wrapper.style.setProperty("--grid-outer-border", "none");