From 710521a73cfefa5061b8a17165713c98911375e7 Mon Sep 17 00:00:00 2001 From: Niklas Ye Date: Sat, 3 Oct 2026 09:33:33 +0200 Subject: [PATCH] Fix the queue chip fade falling short of the right edge MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit position: sticky, as a flex item of the row it's pinning itself against, interacted with that row's gap and its own negative margin in a way that landed it short of the true edge -- visibly, a sliver of the next chip stayed poking out past where the fade should have covered it, which is the "ends before the screen edge" bug reported against the release. Replaced with the simpler, better-supported pattern for this: an absolutely positioned overlay against a position:relative, overflow: auto parent. Unlike a sticky descendant, an absolutely positioned one is resolved against the parent's own (non-scrolling) box, so it stays flush with the real edge regardless of scroll position, without the flex-gap/margin interaction that caused this. Verified visually: a standalone reproduction of both versions, screenshotted with Chromium's headless_shell (no browser automation tool available in this environment, but the binary's right there) -- the old version shows the next chip's edge peeking past the fade, the new one doesn't. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- internal/web/static/app.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/internal/web/static/app.css b/internal/web/static/app.css index 1ce3324..6244494 100644 --- a/internal/web/static/app.css +++ b/internal/web/static/app.css @@ -323,6 +323,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; @@ -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 .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; } -- 2.52.0