src/components/messageStream/FilterChips.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { useI18n } from "../../i18n";
 import { typeFilterLabel } from "../../resourceTypeLabels";
 
@@ -20,6 +21,22 @@ export type FilterChipsProps = {
 
 export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
   const { t } = useI18n();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Let a mouse wheel scroll the row horizontally when it overflows — desktop
+  // mice have no horizontal wheel and the scrollbar is hidden, so otherwise the
+  // last filters are unreachable. Touch/trackpad scroll natively.
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      if (e.deltaY === 0 || el.scrollWidth <= el.clientWidth) return;
+      e.preventDefault();
+      el.scrollLeft += e.deltaY;
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, []);
 
   const tabClass = (active: boolean) =>
     [
@@ -33,6 +50,7 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
   return (
     <div className="bg-ark-bg/95 backdrop-blur md:rounded-t-xl">
       <div
+        ref={scrollRef}
         className="flex items-end gap-2 overflow-x-auto overflow-y-hidden px-4 pr-10 [-ms-overflow-style:none] [scrollbar-width:none] md:gap-5 md:px-1 md:pr-1 [&::-webkit-scrollbar]:hidden"
         role="tablist"
       >