Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-07-27 20:04:44 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat(base): extend inline embed scroll viewport leftward, anchor first cell with grid padding

Browse Source 
Bring back the leftward extension via negative margin-left so the
scroll viewport reaches AppShell.Main's left edge, then offset the
.grid with padding-left = extendLeft so the first cell still lines
up with page-content on load. The extended area becomes scrollable
empty space the user can pan into — same shape as Notion's inline
databases.

Done with one new CSS var (--embed-grid-pad-left) consumed by the
.grid in grid.module.css. Standalone full-page bases never set the
var, so it's a no-op there.
This commit is contained in:
Philipinho
2026-04-27 04:13:34 +01:00
parent a7105267ed
commit 030d3e878a
3 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
+13 -8
View File
@@ -6,23 +6,28 @@ import { useBaseQuery } from "@/features/base/queries/base-query";
const SIDE_GUTTER = 8;
// 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.
// Extend the scroll viewport on both sides (toward AppShell.Main's
// edges), but offset the grid content with padding-left = extendLeft
// so the first cell still lines up with page-content on load. The
// extra leftward area becomes scrollable empty space the user can
// pan into — same behavior as Notion's inline databases.
function applyExtension(wrapper: HTMLDivElement) {
const rect = wrapper.getBoundingClientRect();
if (rect.width === 0) return;
const main = wrapper.closest("main") as HTMLElement | null;
const targetRight = main
? main.getBoundingClientRect().right - SIDE_GUTTER
const mainRect = main?.getBoundingClientRect();
const targetLeft = (mainRect?.left ?? 0) + SIDE_GUTTER;
const targetRight = mainRect
? mainRect.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`);
wrapper.style.setProperty("--embed-grid-pad-left", `${extendLeft}px`);
}
export function BaseEmbedView({ node }: NodeViewProps) {