Skip to content

fix(alert-timeline): make timeline scrollable with mouse wheel/trackpad - #6805

Open
breken-ai wants to merge 1 commit into
keephq:mainfrom
breken-ai:fix-6759-timeline-wheel-scroll
Open

fix(alert-timeline): make timeline scrollable with mouse wheel/trackpad#6805
breken-ai wants to merge 1 commit into
keephq:mainfrom
breken-ai:fix-6759-timeline-wheel-scroll

Conversation

@breken-ai

Copy link
Copy Markdown

Fixes #6759.

Root cause

react-chrono renders nested overflow containers with zero scroll extent inside the timeline (the reporter documented this with DevTools measurements). Chrome latches wheel gestures onto the zero-extent scroll container under the cursor and never chains them to the real scroll container - the tremor Card with max-h-[500px] overflow-y-auto. Net effect: the wheel does nothing over the timeline.

Fix

One file: keep-ui/features/alerts/alert-detail-sidebar/ui/alert-timeline.tsx (+31/-2).

  • The scroll container moves off the Card onto a plain inner div (timelineScrollRef) carrying the same max-h-[500px] overflow-y-auto.
  • A non-passive wheel listener scrolls that div directly (scrollTop += e.deltaY) and calls preventDefault() only when the scroll position actually changed, so overscroll at either end still chains to the page.

A CSS-only override of react-chrono's styled-component class names was considered and rejected as too fragile across react-chrono upgrades.

Verification

Wheel-handler logic exercised in a real Chrome page with a DOM mirroring the reporter's measured structure (658px content in a 500px clipped container):

  • wheel over the nested wrapper scrolls the container and prevents default
  • at max scroll the event passes through unmodified (page chaining preserved)
  • scrolling back up resumes correctly
  • a container with no overflow ignores the gesture entirely (no scroll trap)

Not run: the full keep-ui build/test suite and a native-input repro - synthetic WheelEvent dispatch does not trigger native scrolling, so the no-handler side reflects the reporter's documented measurements rather than fresh native input. No tsc pass locally; the diff is confined to one component using the file's existing imports plus useEffect/useRef.

Built by breken, your AI support engineer - breken.ai - this one's on us.

react-chrono renders nested overflow containers with zero scroll
extent inside the timeline. Chrome latches wheel gestures onto the one
under the cursor and never chains them to the clipped scroll container,
so the timeline cannot be scrolled. Move max-h/overflow-y off the
tremor Card onto a plain inner div and attach a non-passive wheel
listener that scrolls it directly, calling preventDefault only when the
scroll position actually changed so overscroll still chains to the
page.
@CLAassistant

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@shahargl

Copy link
Copy Markdown
Member

@breken-ai u'll need to sign the CLA

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[🐛 Bug]: Alert detail Timeline cannot be scrolled with mouse wheel / trackpad

3 participants