From bef739b7ca9e9939bf5c9727813b2169f5cbb4e0 Mon Sep 17 00:00:00 2001
From: r-zakarya <82443831+r-zakarya@users.noreply.github.com>
Date: Wed, 22 Jul 2026 11:43:57 +0100
Subject: [PATCH] fix(layout): stop rows showing through above the sticky title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 css/style.css | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/css/style.css b/css/style.css
index a6977d8..7d7f1f7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -799,15 +799,17 @@ input[type="range"]::-webkit-slider-thumb {
 .dropdown-item:hover { background: var(--bg-elev-2); }
 .dropdown-item svg { color: var(--text-dim); }
 
-.content { flex: 1; padding: 24px 32px; overflow-y: auto; }
-/* Sticky title row. The negative top margin cancels .content's padding-top so
-   nothing scrolls through the gap above it. Everything else that sticks
-   (batch bar, pagination, table header) offsets by --hdr-h. */
+/* No padding-top: the sticky .content-header owns it, so its box starts flush
+   with the scrollport and nothing can scroll through above it. */
+.content { flex: 1; padding: 0 32px 24px; overflow-y: auto; }
+/* 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 {
     display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px;
     position: sticky; top: 0; z-index: 12;
     background: var(--bg);
-    padding-top: 24px; margin-top: -24px;
+    padding-top: 24px;
 }
 .content-header h2 { font-size: 22px; font-weight: 600; margin: 0; }
 .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; }
     .nav-item { justify-content: center; padding: 8px; }
     .topbar { padding: 12px 16px; }
-    .content { padding: 16px; }
-    .content-header { padding-top: 16px; margin-top: -16px; }
+    .content { padding: 0 16px 16px; }
+    .content-header { padding-top: 16px; }
     .slideover { width: 100%; }
     /* On a narrow viewport the slideover fills the screen — no point
        pushing the shell, the table isn't visible anyway. */