sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-08-29 18:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(base): drop outer panel border on inline embed grid

Browse Source 
The .grid had a 1px outer border + small radius drawing a rounded
rectangle around the whole table. In standalone full-page mode that
reads as a panel and is fine. In an inline embed it looked like a
floating box, especially with the leftward padded area inside the
border.

Make the outer border and radius CSS vars; the embed wrapper sets
them to none/0 so inline databases get only cell-level gridlines,
matching Notion's document-style rendering. Standalone bases get
the default 1px panel frame as before.
This commit is contained in:
Philipinho
2026-04-27 04:20:58 +01:00
parent 030d3e878a
commit 678c6f5f3f
2 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/base/styles/grid.module.css
+10 -3
View File
@@ -10,9 +10,16 @@
.grid { .grid {
display: grid; display: grid;
min-width: max-content; min-width: max-content;
border: 1px solid /* Outer border + radius is the panel-style framing for the standalone
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4)); * full-page base. Inline embeds override these vars to drop the outer
border-radius: var(--mantine-radius-sm); * frame so the table reads as part of the document — cell-level
* borders below still provide the gridline separators. */
border: var(
--grid-outer-border,
1px solid
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4))
);
border-radius: var(--grid-outer-radius, var(--mantine-radius-sm));
/* When the embed wrapper extends the scroll viewport leftward, this /* When the embed wrapper extends the scroll viewport leftward, this
* padding pushes the first cell back to page-content alignment so * padding pushes the first cell back to page-content alignment so
* the table looks aligned on load. The padded area is part of the * the table looks aligned on load. The padded area is part of the
apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
+4
View File
@@ -28,6 +28,10 @@ function applyExtension(wrapper: HTMLDivElement) {
wrapper.style.setProperty("--embed-extend-l", `${extendLeft}px`); wrapper.style.setProperty("--embed-extend-l", `${extendLeft}px`);
wrapper.style.setProperty("--embed-extend-r", `${extendRight}px`); wrapper.style.setProperty("--embed-extend-r", `${extendRight}px`);
wrapper.style.setProperty("--embed-grid-pad-left", `${extendLeft}px`); wrapper.style.setProperty("--embed-grid-pad-left", `${extendLeft}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");
wrapper.style.setProperty("--grid-outer-radius", "0");
} }
export function BaseEmbedView({ node }: NodeViewProps) { export function BaseEmbedView({ node }: NodeViewProps) {