sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-06-10 01:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(base): keep inline embed left edge at page-content, extend right only

Browse Source 
Removing the leftward extension. With negative margin-left, the
grid grew leftward past page-content and the first column appeared
near the sidebar edge on load — wrong; Notion keeps the first column
aligned with page text. Drop margin-left and the extendLeft
calculation; only extend rightward toward AppShell.Main's right edge.

Leftward viewport extension (so frozen columns can lock at the
sidebar edge during scroll) becomes meaningful once we add frozen
columns. Deferred until that feature lands.
This commit is contained in:
Philipinho
2026-04-27 04:05:18 +01:00
parent 67f45ee61b
commit a7105267ed
2 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/base/components/base-table.tsx
+6 -6
View File
@@ -315,14 +315,14 @@ export function BaseTable({ pageId, embedded }: BaseTableProps) {
if (!base) return null;
// When embedded inline in a doc page, the parent <NodeViewWrapper>
// exposes --embed-extend-l / --embed-extend-r (positive px values).
// We pull the grid's left/right edges outward via negative margin —
// box-model: width: auto becomes parent_width + extend, so the box
// physically grows past its parent's bounds. The toolbar keeps the
// parent-constrained width so it stays in line with the page text.
// 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.
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/editor/components/base-embed/base-embed-view.tsx
+8 -12
View File
@@ -6,26 +6,22 @@ import { useBaseQuery } from "@/features/base/queries/base-query";
const SIDE_GUTTER = 8;
// Anchor directly to AppShell.Main (the <main> tag) for both sides.
// This is the layout container that already accounts for the navbar's
// width and sidebar collapse state — its left/right edges are exactly
// where the embed should extend to.
// 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.
function applyExtension(wrapper: HTMLDivElement) {
const rect = wrapper.getBoundingClientRect();
if (rect.width === 0) return;
const main = wrapper.closest("main") as HTMLElement | null;
const mainRect = main?.getBoundingClientRect();
const targetLeft = (mainRect?.left ?? 0) + SIDE_GUTTER;
const targetRight = mainRect
? mainRect.right - SIDE_GUTTER
const targetRight = main
? main.getBoundingClientRect().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`);
}