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