Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(list): keep the header gap constant when it sticks

Browse Source 
offsetHeight feeds --hdr-h, where the sticky pagination parks, and it ignores margins - so the 20px gap under the title vanished as soon as the header stuck. Turned into padding: measured and painted, so the spacing stays constant and opaque.
This commit is contained in:
r-zakarya
2026-08-02 00:09:33 +01:00
parent ecaa226354
commit 7074e7ff93
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+12 -7
View File
@@ -785,12 +785,17 @@ input[type="range"]::-webkit-slider-thumb {
the scrollport edge. Everything else that sticks (batch bar, pagination,
table header) offsets by --hdr-h. */
.content-header {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px;
/* FIXED, not min-height: 24px of padding + 38px of bar. A minimum still
lets a child grow the row — a couple of stray pixels from the selection
bar were enough to push the whole grid down in table and list view. With
a fixed height nothing inside can move what follows. */
height: 62px;
display: flex; align-items: baseline; gap: 12px;
/* padding, NOT margin: offsetHeight (which feeds --hdr-h, where the sticky
pagination parks) ignores margins, so the 20px gap vanished as soon as
the header stuck. As padding it is measured AND painted — the gap stays
constant and stays opaque instead of letting rows scroll through it. */
padding-bottom: 20px;
/* FIXED, not min-height: 24 top padding + 38 bar + 20 bottom padding. A
minimum still lets a child grow the row — a couple of stray pixels from
the selection bar were enough to push the whole grid down in table and
list view. With a fixed height nothing inside can move what follows. */
height: 82px;
position: sticky; top: 0; z-index: 12;
background: var(--bg);
padding-top: 24px;
@@ -2682,7 +2687,7 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
.nav-item { justify-content: center; padding: 8px; }
.topbar { padding: 12px 16px; }
.content { padding: 0 16px 16px; }
.content-header { padding-top: 16px; height: 54px; } /* 16 + 38 */
.content-header { padding-top: 16px; height: 74px; } /* 16 + 38 + 20 */
.slideover { width: 100%; }
/* On a narrow viewport the slideover fills the screen — no point
pushing the shell, the table isn't visible anyway. */