Chip strips drag sideways with a mouse (a drag doesn't click the chip it started on) and show a thin scrollbar on mouse devices, so the feed chips that run past the card are reachable on desktop

Co-Authored-By: Claude Opus 5.5 <[email protected]>

1 files changed, 8 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index dabd7be..9b5f5d9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -703,6 +703,14 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; }
 /* the feeds row: pills that scroll sideways, the one on screen filled */
 .feed-chips { gap: 6px; flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
 .feed-chips::-webkit-scrollbar { display: none; }
+/* with a mouse: a thin bar says the strip scrolls, and it drags (app.js) */
+@media (hover: hover) and (pointer: fine) {
+  .feed-chips { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding-bottom: 6px; cursor: grab; }
+  .feed-chips::-webkit-scrollbar { display: block; height: 6px; }
+  .feed-chips::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
+  .feed-chips.dragging { cursor: grabbing; user-select: none; }
+  .feed-chips.dragging .feed-chip { pointer-events: none; }
+}
 .feed-chip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface2); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 14px; line-height: 1.2; cursor: pointer; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
 .feed-chip.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
 .feed-chip.add { font-weight: 600; padding: 5px 11px; }