diff --git a/src/components/messageStream/FilterChips.tsx b/src/components/messageStream/FilterChips.tsx index e6781b6..a649951 100644 --- a/src/components/messageStream/FilterChips.tsx +++ b/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(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 (