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

Fix the queue chip fade falling short of the right edge #30

Merged
niklas merged 1 commits from fix-chips-fade-edge into main 2026-10-03 07:36:12 +00:00
Conversation 0 Commits 1 Files Changed 1
+8 -4
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
@@ -323,6 +323,7 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
/* ---------- chips ---------- */ /* ---------- chips ---------- */
.chips { .chips {
position: relative;
display: flex; gap: 6px; display: flex; gap: 6px;
padding: 12px 16px 8px; padding: 12px 16px 8px;
overflow-x: auto; scrollbar-width: none; overflow-x: auto; scrollbar-width: none;
@@ -338,11 +339,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[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip .count { margin-left: 4px; opacity: 0.7; } .chip .count { margin-left: 4px; opacity: 0.7; }
/* Pinned to the visible right edge of the scrolling row (sticky, not /* An overlay, not a flex item: absolute against .chips' own (non-scrolling)
absolute, so it tracks the scroll position rather than the content). */ 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 { .chips-fade {
position: sticky; right: -1px; flex: none; position: absolute; top: 0; right: 0; bottom: 0;
width: 24px; margin-left: -24px; width: 24px;
background: linear-gradient(to right, transparent, var(--bg)); background: linear-gradient(to right, transparent, var(--bg));
pointer-events: none; pointer-events: none;
} }