thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Admin Sources: constrained scroll panel with sticky header

Browse Source 
The sources table scrolled horizontally but had no height cap, so its horizontal
scrollbar sat at the bottom of a 46-row table — you had to page the whole window
down to reach it. Make .tablewrap a self-contained scroll panel (max-height 65vh,
overflow auto, bordered card) so both scrollbars stay on-screen; pin the header
row sticky (box-shadow divider survives position:sticky under border-collapse).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-11 20:57:37 -04:00
parent d558c99b8e
commit ba1a29d12a
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/admin/+page.svelte
+14 -2
View File
@@ -1075,11 +1075,23 @@
.cactions .cchk { font-size: 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
/* Source health table */
.tablewrap { overflow-x: auto; }
/* Constrained scroll box: the table scrolls BOTH ways inside its own panel, so
the horizontal scrollbar stays on-screen instead of living at the bottom of a
46-row table you'd have to page down to reach. Header row stays sticky. */
.tablewrap {
max-height: 65vh; overflow: auto;
border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.srctable { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 560px; }
.srctable thead th {
position: sticky; top: 0; z-index: 1; background: var(--surface);
/* box-shadow draws the divider reliably under position:sticky (a plain
border-bottom can drop out while scrolling with border-collapse). */
box-shadow: inset 0 -1px 0 var(--line);
}
.srctable th {
text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--muted); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line);
color: var(--muted); font-weight: 600; padding: 8px 10px;
}
.srctable td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.srctable .num { text-align: right; font-variant-numeric: tabular-nums; }