From 678c6f5f3f2a1e11067fe6e8cf2416f240d442c0 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 04:20:58 +0100
Subject: [PATCH] fix(base): drop outer panel border on inline embed grid

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.
---
 .../client/src/features/base/styles/grid.module.css | 13 ++++++++++---
 .../components/base-embed/base-embed-view.tsx       |  4 ++++
 2 files changed, 14 insertions(+), 3 deletions(-)

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) {