sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-06-11 02:36:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(base): align inline-embed AddRowButton to page-content edge like standalone

Browse Source 
In embed mode the "+ New row" button rendered to the right of the
data columns instead of at the page-content edge (where it lives in
standalone). Two compounding causes:

  - position: sticky with inset-inline-start:
    var(--embed-grid-pad-left, 0). Sticky offsets are measured from
    the scroll-port, not the bodyGrid's outer edge — and the scroll-
    port already starts at the page-content edge (bodyGrid's negative
    margins and equal padding cancel out). With the variable set to
    ~200px in embed, sticky shifted the button 200px *into* the
    scroll-port. inset-inline-start: 0 keeps it at the scroll-port's
    start in both modes.
  - max-content grid item with default justify-self: stretch on a
    grid-column: 1 / -1 area has surprising placement; `justify-self:
    start` makes the inline-start anchoring explicit.

Standalone behavior is unchanged (the variable was 0 there anyway).
This commit is contained in:
Philipinho
2026-04-28 11:51:06 +01:00
parent edc7143f77
commit 7e35936544
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/base/styles/grid.module.css
+12 -7
View File
@@ -305,13 +305,18 @@
* `grid-column: 1 / -1` it would auto-place into track 1 of a new
* grid row, leaving phantom empty cells in the remaining tracks of
* that row. Spanning all tracks gives it a single full-row grid area
* while inline-flex + width:max-content + sticky-left keeps the
* visible button shrunk to its content and anchored to the page-
* content edge during horizontal scroll. --embed-grid-pad-left is
* the leftward extension distance in embed mode (sticks at page-
* content-left), 0 in standalone (sticks at .bodyGrid's natural
* left). */
* while inline-flex + width:max-content keeps the visible button
* shrunk to its content. `justify-self: start` pins it to the
* inline-start of that grid area (a max-content grid item with
* `justify-self: stretch` — the default — has surprising placement
* across engines, so be explicit). `inset-inline-start: 0` keeps
* the button at the scroll-port's start during horizontal scroll;
* scroll-port = bodyGrid's content area = the page-content edge in
* both standalone and embed modes (the bodyGrid's negative margins
* and equal padding cancel out, so x=0 of the content area is
* already the page-content-left). */
grid-column: 1 / -1;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 6px;
@@ -326,7 +331,7 @@
border-radius: 4px;
transition: background-color 150ms ease;
position: sticky;
inset-inline-start: var(--embed-grid-pad-left, 0);
inset-inline-start: 0;
background-color: light-dark(
var(--mantine-color-body),
var(--mantine-color-dark-7)