feat(base): add right-side scroll headroom on inline embed grid

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).
This commit is contained in:
Philipinho
2026-04-27 04:44:47 +01:00
parent 583d2d37c4
commit 00e9d1d724
2 changed files with 8 additions and 0 deletions
@@ -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 {
@@ -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");