sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-08-31 10:55:29 +08: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/base/components/base-table.tsx
+8 -6
View File
@@ -315,14 +315,16 @@ export function BaseTable({ pageId, embedded }: BaseTableProps) {
if (!base) return null;
// When embedded inline in a doc page, the parent <NodeViewWrapper>
// 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.
// exposes --embed-extend-l / --embed-extend-r (positive px). We
// pull both edges outward via negative margin so the scroll viewport
// grows toward AppShell.Main's edges. Initial visual alignment with
// page text is preserved by --embed-grid-pad-left, applied to the
// .grid in grid.module.css — that padding makes the first cell sit
// at page-content-left on load while still letting the user pan
// left into the extended viewport. 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;
apps/client/src/features/base/styles/grid.module.css
+6
View File
@@ -13,6 +13,12 @@
border: 1px solid
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
border-radius: var(--mantine-radius-sm);
/* When the embed wrapper extends the scroll viewport leftward, this
* padding pushes the first cell back to page-content alignment so
* the table looks aligned on load. The padded area is part of the
* 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);
}
.headerRow {