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

Merge pull request 'Fix the queue chip fade falling short of the right edge' (#30) from fix-chips-fade-edge into main
CI / chart (push) Successful in 1s
Details
CI / security (push) Successful in 21s
Details
CI / test (push) Has been cancelled
Details

Browse Source
This commit was merged in pull request #30.
This commit is contained in:
Niklas Ye
2026-10-03 07:36:12 +00:00
parent d9492913ed 710521a73c
commit 43beda9a30
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+8 -4
View File
@@ -326,6 +326,7 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
/* ---------- chips ---------- */
.chips {
position: relative;
display: flex; gap: 6px;
padding: 12px 16px 8px;
overflow-x: auto; scrollbar-width: none;
@@ -341,11 +342,14 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
}
.chip[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip .count { margin-left: 4px; opacity: 0.7; }
/* Pinned to the visible right edge of the scrolling row (sticky, not
absolute, so it tracks the scroll position rather than the content). */
/* 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: sticky; right: -1px; flex: none;
width: 24px; margin-left: -24px;
position: absolute; top: 0; right: 0; bottom: 0;
width: 24px;
background: linear-gradient(to right, transparent, var(--bg));
pointer-events: none;
}