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

fix(layout): stop rows showing through above the sticky title

Browse Source 
A sticky box is held so its *margin* box respects `top`, so the -24px
margin-top used to cancel .content's padding pushed the header's border box
24px down from the scrollport edge — rows scrolled through the strip above
it. Move the top padding off .content and onto .content-header instead: same
spacing at rest, opaque box flush with the scrollport when stuck.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-07-22 11:43:57 +01:00
parent 24d74df2ab
commit bef739b7ca
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+9 -7
View File
@@ -799,15 +799,17 @@ input[type="range"]::-webkit-slider-thumb {
.dropdown-item:hover { background: var(--bg-elev-2); } .dropdown-item:hover { background: var(--bg-elev-2); }
.dropdown-item svg { color: var(--text-dim); } .dropdown-item svg { color: var(--text-dim); }
.content { flex: 1; padding: 24px 32px; overflow-y: auto; } /* No padding-top: the sticky .content-header owns it, so its box starts flush
/* Sticky title row. The negative top margin cancels .content's padding-top so with the scrollport and nothing can scroll through above it. */
nothing scrolls through the gap above it. Everything else that sticks .content { flex: 1; padding: 0 32px 24px; overflow-y: auto; }
(batch bar, pagination, table header) offsets by --hdr-h. */ /* Sticky title row — carries .content's top padding so its opaque box reaches
the scrollport edge. Everything else that sticks (batch bar, pagination,
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; margin-bottom: 20px;
position: sticky; top: 0; z-index: 12; position: sticky; top: 0; z-index: 12;
background: var(--bg); background: var(--bg);
padding-top: 24px; margin-top: -24px; padding-top: 24px;
} }
.content-header h2 { font-size: 22px; font-weight: 600; margin: 0; } .content-header h2 { font-size: 22px; font-weight: 600; margin: 0; }
.content-meta { color: var(--text-faint); font-size: 12px; } .content-meta { color: var(--text-faint); font-size: 12px; }
@@ -2588,8 +2590,8 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
.sidebar-section-header { display: none; } .sidebar-section-header { display: none; }
.nav-item { justify-content: center; padding: 8px; } .nav-item { justify-content: center; padding: 8px; }
.topbar { padding: 12px 16px; } .topbar { padding: 12px 16px; }
.content { padding: 16px; } .content { padding: 0 16px 16px; }
.content-header { padding-top: 16px; margin-top: -16px; } .content-header { padding-top: 16px; }
.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. */