niklas/terdut-server
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 55 Wiki Activity

Keep the scroll fade at the screen edge on the queue's filter row

Browse Source 
The fade that hints at more filters to the right was an element inside the
scrolling row, so it scrolled away with the chips instead of staying at the
edge; the comment on it claimed the opposite. It is now a mask on the strip
itself, applied only while there is more to scroll to (fadeOnOverflow in
ui.js sets data-more), so it stays put and disappears at the end instead of
dimming the last chip.

The Team and Admin tab strips had an always-on mask from the earlier
"Sources is cut off" fix, which dimmed their last tab even when fully
scrolled; they use the same mechanism now.

Web UI only: no endpoint or JSON shape changed, so nothing to mirror in
terdut-tui.
This commit is contained in:
Niklas Ye
2026-10-08 15:12:16 +02:00
parent 7665e5e52f
commit 942517c7a8
5 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+7 -16
View File
@@ -395,16 +395,13 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
.chip .count { margin-left: 4px; opacity: 0.7; }
/* Nothing in it: step back so the chips that have something stand out. */
.chip .count.zero { opacity: 0.4; }
/* An overlay, not a flex item: absolute against .chips' own (non-scrolling)
box stays flush with its real right edge regardless of scroll position,
which turned out not to be true of position:sticky here — as a flex
item, its sticky offset interacted with the row's gap and its own
negative margin, landing short of the edge by about one gap's width. */
.chips-fade {
position: absolute; top: 0; right: 0; bottom: 0;
width: 24px;
background: linear-gradient(to right, transparent, var(--bg));
pointer-events: none;
/* A scrolling strip fades on the right edge while there is more to scroll to
(fadeOnOverflow in ui.js sets data-more). A mask on the strip itself, not an
element inside it: anything inside a scroller scrolls away with the content,
which is what the old overlay did. */
[data-more] {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
/* ---------- lists ---------- */
@@ -886,7 +883,6 @@ kbd {
/* The pane is 340-420px wide and a mouse cannot scroll a row whose scrollbar
is hidden, so the chips wrap here instead: Archived stays reachable. */
.pane-list .chips { flex-wrap: wrap; overflow-x: visible; }
.chips-fade { display: none; }
/* With nothing selected there is no detail to show next to, so the list
takes the whole row instead of leaving the second column as dead space
around the placeholder text. Selecting an incident (.has-detail) drops
@@ -1236,11 +1232,6 @@ button.rota-week:hover { background: var(--surface-2); color: var(--text); }
overflow-x: auto; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
/* A fade on the right edge says "there is more" where the strip overflows;
the desktop width fits every entry, so it is phone-only. */
@media (max-width: 899px) {
.subnav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}
.subnav-link {
flex: none;
padding: 8px 12px; margin-bottom: -1px;