diff --git a/apps/client/src/features/base/styles/grid.module.css b/apps/client/src/features/base/styles/grid.module.css index f5dc16a32..da7b381ea 100644 --- a/apps/client/src/features/base/styles/grid.module.css +++ b/apps/client/src/features/base/styles/grid.module.css @@ -10,9 +10,16 @@ .grid { display: grid; min-width: max-content; - border: 1px solid - light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4)); - border-radius: var(--mantine-radius-sm); + /* Outer border + radius is the panel-style framing for the standalone + * full-page base. Inline embeds override these vars to drop the outer + * 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 * padding pushes the first cell back to page-content alignment so * the table looks aligned on load. The padded area is part of the diff --git a/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx b/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx index 8da3401f6..8bd81bba6 100644 --- a/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx +++ b/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx @@ -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`); + // 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) {