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, the scrollport edge. Everything else that sticks (batch bar, pagination,
table header) offsets by --hdr-h. */ table header) offsets by --hdr-h. */
.content-header { .content-header {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; display: flex; align-items: baseline; gap: 12px;
/* FIXED, not min-height: 24px of padding + 38px of bar. A minimum still /* padding, NOT margin: offsetHeight (which feeds --hdr-h, where the sticky
lets a child grow the row — a couple of stray pixels from the selection pagination parks) ignores margins, so the 20px gap vanished as soon as
bar were enough to push the whole grid down in table and list view. With the header stuck. As padding it is measured AND painted — the gap stays
a fixed height nothing inside can move what follows. */ constant and stays opaque instead of letting rows scroll through it. */
height: 62px; 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; position: sticky; top: 0; z-index: 12;
background: var(--bg); background: var(--bg);
padding-top: 24px; padding-top: 24px;
@@ -2682,7 +2687,7 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
.nav-item { justify-content: center; padding: 8px; } .nav-item { justify-content: center; padding: 8px; }
.topbar { padding: 12px 16px; } .topbar { padding: 12px 16px; }
.content { padding: 0 16px 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%; } .slideover { width: 100%; }
/* On a narrow viewport the slideover fills the screen — no point /* On a narrow viewport the slideover fills the screen — no point
pushing the shell, the table isn't visible anyway. */ pushing the shell, the table isn't visible anyway. */