From 7e35936544a78100476c6468d9a0c76bb5d2feca Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Tue, 28 Apr 2026 11:51:06 +0100
Subject: [PATCH] fix(base): align inline-embed AddRowButton to page-content
 edge like standalone
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In embed mode the "+ New row" button rendered to the right of the
data columns instead of at the page-content edge (where it lives in
standalone). Two compounding causes:

  - position: sticky with inset-inline-start:
    var(--embed-grid-pad-left, 0). Sticky offsets are measured from
    the scroll-port, not the bodyGrid's outer edge — and the scroll-
    port already starts at the page-content edge (bodyGrid's negative
    margins and equal padding cancel out). With the variable set to
    ~200px in embed, sticky shifted the button 200px *into* the
    scroll-port. inset-inline-start: 0 keeps it at the scroll-port's
    start in both modes.
  - max-content grid item with default justify-self: stretch on a
    grid-column: 1 / -1 area has surprising placement; `justify-self:
    start` makes the inline-start anchoring explicit.

Standalone behavior is unchanged (the variable was 0 there anyway).
---
 .../src/features/base/styles/grid.module.css  | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/features/base/styles/grid.module.css b/apps/client/src/features/base/styles/grid.module.css
index 0fd3d9716..da8372cb3 100644
--- a/apps/client/src/features/base/styles/grid.module.css
+++ b/apps/client/src/features/base/styles/grid.module.css
@@ -305,13 +305,18 @@
    * `grid-column: 1 / -1` it would auto-place into track 1 of a new
    * grid row, leaving phantom empty cells in the remaining tracks of
    * that row. Spanning all tracks gives it a single full-row grid area
-   * while inline-flex + width:max-content + sticky-left keeps the
-   * visible button shrunk to its content and anchored to the page-
-   * content edge during horizontal scroll. --embed-grid-pad-left is
-   * the leftward extension distance in embed mode (sticks at page-
-   * content-left), 0 in standalone (sticks at .bodyGrid's natural
-   * left). */
+   * while inline-flex + width:max-content keeps the visible button
+   * shrunk to its content. `justify-self: start` pins it to the
+   * inline-start of that grid area (a max-content grid item with
+   * `justify-self: stretch` — the default — has surprising placement
+   * across engines, so be explicit). `inset-inline-start: 0` keeps
+   * the button at the scroll-port's start during horizontal scroll;
+   * scroll-port = bodyGrid's content area = the page-content edge in
+   * both standalone and embed modes (the bodyGrid's negative margins
+   * and equal padding cancel out, so x=0 of the content area is
+   * already the page-content-left). */
   grid-column: 1 / -1;
+  justify-self: start;
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -326,7 +331,7 @@
   border-radius: 4px;
   transition: background-color 150ms ease;
   position: sticky;
-  inset-inline-start: var(--embed-grid-pad-left, 0);
+  inset-inline-start: 0;
   background-color: light-dark(
     var(--mantine-color-body),
     var(--mantine-color-dark-7)