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