From 583d2d37c4cbd89c342794d7f7f2184432f16158 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 04:39:29 +0100
Subject: [PATCH] fix(base): pull AddRowButton out of grid so sticky-left
 actually sticks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As a child of .grid with grid-column: 1/-1, the button took the full
row width and the sticky-left offset got swallowed by the grid layout
— it scrolled along with the cells instead of anchoring to the left.

Move it to a sibling of .grid inside .gridWrapper, restyle as a
small inline-flex chip with width: max-content. Sticky-left now
keeps it pinned to page-content-left while the user scrolls
horizontally, matching the toolbar.

Add padding-bottom: 6px on .gridWrapper and a small vertical margin
on the button so the horizontal scrollbar no longer overlaps it.
---
 .../base/components/grid/grid-container.tsx   |  5 ++--
 .../src/features/base/styles/grid.module.css  | 26 +++++++++++--------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/features/base/components/grid/grid-container.tsx b/apps/client/src/features/base/components/grid/grid-container.tsx
index 3f396fad3..22ccb13eb 100644
--- a/apps/client/src/features/base/components/grid/grid-container.tsx
+++ b/apps/client/src/features/base/components/grid/grid-container.tsx
@@ -296,10 +296,9 @@ export function GridContainer({
           {paddingBottom > 0 && (
             <div style={{ height: paddingBottom, gridColumn: "1 / -1" }} />
           )}
-
-          <AddRowButton onClick={handleAddRow} />
-          {pageId && <SelectionActionBar pageId={pageId} />}
         </div>
+        <AddRowButton onClick={handleAddRow} />
+        {pageId && <SelectionActionBar pageId={pageId} />}
       </div>
     </DndContext>
   );
diff --git a/apps/client/src/features/base/styles/grid.module.css b/apps/client/src/features/base/styles/grid.module.css
index 02766835c..ed62b210e 100644
--- a/apps/client/src/features/base/styles/grid.module.css
+++ b/apps/client/src/features/base/styles/grid.module.css
@@ -5,6 +5,9 @@
   flex: 1;
   min-height: 0;
   padding-left: 6px;
+  /* Reserve space below the AddRowButton so the horizontal scrollbar
+   * doesn't overlap it. */
+  padding-bottom: 6px;
 }
 
 .grid {
@@ -239,24 +242,25 @@
 }
 
 .addRowButton {
-  display: flex;
+  /* Inline-flex + width:max-content so the button only takes the space
+   * it needs and stays anchored to the page-content edge during the
+   * horizontal scroll, instead of riding along with the grid as a
+   * full-row item. --embed-grid-pad-left is the leftward extension
+   * distance in embed mode (sticks at page-content-left), 0 in
+   * standalone (sticks at gridWrapper's natural left). */
+  display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 34px;
-  padding: 0 8px;
+  width: max-content;
+  height: 32px;
+  margin: 4px 0 4px;
+  padding: 0 10px;
   font-size: var(--mantine-font-size-sm);
   color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-  border-top: 1px dashed
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
   cursor: pointer;
   user-select: none;
+  border-radius: 4px;
   transition: background-color 150ms ease;
-  grid-column: 1 / -1;
-  /* Stick to the page-content edge during horizontal scroll so the
-   * "New row" affordance is always reachable, just like the toolbar.
-   * In embed mode --embed-grid-pad-left is the offset that maps to
-   * page-content-left; in standalone mode the var is 0 so the button
-   * sticks at the grid's natural left edge. */
   position: sticky;
   inset-inline-start: var(--embed-grid-pad-left, 0);
   background-color: light-dark(