From a992fa8a63546c1c113645732a40f0c9bf5eab90 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 04:30:04 +0100
Subject: [PATCH] feat(base): keep New row button sticky during horizontal
 scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add position: sticky + inset-inline-start to .addRowButton so the
'New row' affordance stays at the page-content edge while the user
scrolls horizontally — same shape as the toolbar staying put. The
sticky offset uses the existing --embed-grid-pad-left var: in embed
mode that's the leftward extension distance (so it sticks at
page-content-left); in standalone mode the var is 0 (sticks at the
grid's natural left edge, no visible effect when there's no scroll).

Add a body-color background and z-index: 4 so cells don't bleed
through during scroll.
---
 apps/client/src/features/base/styles/grid.module.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/client/src/features/base/styles/grid.module.css b/apps/client/src/features/base/styles/grid.module.css
index da7b381ea..02766835c 100644
--- a/apps/client/src/features/base/styles/grid.module.css
+++ b/apps/client/src/features/base/styles/grid.module.css
@@ -252,6 +252,18 @@
   user-select: none;
   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(
+    var(--mantine-color-body),
+    var(--mantine-color-dark-7)
+  );
+  z-index: 4;
 }
 
 .addRowButton:hover {