fix(alert-timeline): make timeline scrollable with mouse wheel/trackpad - #6805
Open
breken-ai wants to merge 1 commit into
Open
fix(alert-timeline): make timeline scrollable with mouse wheel/trackpad#6805breken-ai wants to merge 1 commit into
breken-ai wants to merge 1 commit into
Conversation
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.
|
|
Member
|
@breken-ai u'll need to sign the CLA |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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).timelineScrollRef) carrying the samemax-h-[500px] overflow-y-auto.wheellistener scrolls that div directly (scrollTop += e.deltaY) and callspreventDefault()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):
Not run: the full keep-ui build/test suite and a native-input repro - synthetic
WheelEventdispatch does not trigger native scrolling, so the no-handler side reflects the reporter's documented measurements rather than fresh native input. Notscpass locally; the diff is confined to one component using the file's existing imports plususeEffect/useRef.