From 7dfb172d45e372d58d54cfa4038eb30d93785f89 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Tue, 28 Apr 2026 18:30:06 +0100
Subject: [PATCH] style(base): slim the body-grid horizontal scrollbar

The browser-default-thick scrollbar at the bottom of an inline-embed's
bodyGrid was visually competing with the table content. Drop it to an
8px thumb with a transparent track in WebKit and `scrollbar-width:
thin` in Firefox. Tokens picked from the Mantine theme so dark mode
inverts cleanly.
---
 .../src/features/base/styles/grid.module.css  | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/apps/client/src/features/base/styles/grid.module.css b/apps/client/src/features/base/styles/grid.module.css
index da8372cb3..e498ed003 100644
--- a/apps/client/src/features/base/styles/grid.module.css
+++ b/apps/client/src/features/base/styles/grid.module.css
@@ -80,6 +80,34 @@
   /* Bottom-padding so the AddRowButton keeps clear of the horizontal
    * scrollbar that lives on this element. */
   padding-bottom: 6px;
+  /* Slim down the horizontal scrollbar — the browser default is too
+   * heavy for an inline embed sitting in a document and competes
+   * visually with the table content. Firefox honors scrollbar-width;
+   * Chrome/Safari/Edge style the WebKit pseudo-elements. */
+  scrollbar-width: thin;
+}
+
+.bodyGrid::-webkit-scrollbar {
+  height: 8px;
+}
+
+.bodyGrid::-webkit-scrollbar-thumb {
+  background-color: light-dark(
+    var(--mantine-color-gray-4),
+    var(--mantine-color-dark-4)
+  );
+  border-radius: 4px;
+}
+
+.bodyGrid::-webkit-scrollbar-thumb:hover {
+  background-color: light-dark(
+    var(--mantine-color-gray-5),
+    var(--mantine-color-dark-3)
+  );
+}
+
+.bodyGrid::-webkit-scrollbar-track {
+  background-color: transparent;
 }
 
 .headerRow {