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;
 }