Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-07-15 01:16:44 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix(base): pull AddRowButton out of grid so sticky-left actually sticks

Browse Source 
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.
This commit is contained in:
Philipinho
2026-04-27 04:39:29 +01:00
parent a992fa8a63
commit 583d2d37c4
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/base/components/grid/grid-container.tsx
+2 -3
View File
@@ -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>
);
apps/client/src/features/base/styles/grid.module.css
+15 -11
View File
@@ -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(