sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-06-10 01:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(base): slim the body-grid horizontal scrollbar

Browse Source 
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.
This commit is contained in:
Philipinho
2026-04-28 18:30:06 +01:00
parent 79394f93f5
commit 7dfb172d45
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/base/styles/grid.module.css
+28
View File
@@ -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 {