fix: Scrolling issues with virtual renderers #3446
Conversation
Bundle ReportChanges will increase total bundle size by 2.98kB (0.02%) ⬆️. This is within the configured threshold ✅ Detailed changes
|
Bundle ReportChanges will increase total bundle size by 2.98kB (0.02%) ⬆️. This is within the configured threshold ✅ Detailed changes
|
Codecov ReportAll modified and coverable lines are covered by tests ✅ ✅ All tests successful. No failed tests found. @@ Coverage Diff @@
## main #3446 +/- ##
=======================================
Coverage 99.15% 99.16%
=======================================
Files 808 809 +1
Lines 14269 14296 +27
Branches 3949 3948 -1
=======================================
+ Hits 14148 14176 +28
+ Misses 112 111 -1
Partials 9 9
... and 19 files with indirect coverage changes
Continue to review full report in Codecov by Sentry.
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## main #3446 +/- ##
=======================================
Coverage 99.15% 99.16%
=======================================
Files 808 809 +1
Lines 14269 14296 +27
Branches 3942 3948 +6
=======================================
+ Hits 14148 14176 +28
+ Misses 112 111 -1
Partials 9 9
... and 19 files with indirect coverage changes
Continue to review full report in Codecov by Sentry.
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
✅ All tests successful. No failed tests found. @@ Coverage Diff @@
## main #3446 +/- ##
=======================================
Coverage 99.15% 99.16%
=======================================
Files 808 809 +1
Lines 14269 14296 +27
Branches 3942 3948 +6
=======================================
+ Hits 14148 14176 +28
+ Misses 112 111 -1
Partials 9 9
... and 19 files with indirect coverage changes
Continue to review full report in Codecov by Sentry.
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
✅ All tests successful. No failed tests found. @@ Coverage Diff @@
## main #3446 +/- ##
=======================================
Coverage 99.15% 99.16%
=======================================
Files 808 809 +1
Lines 14269 14296 +27
Branches 3949 3955 +6
=======================================
+ Hits 14148 14176 +28
+ Misses 112 111 -1
Partials 9 9
... and 19 files with indirect coverage changes
Continue to review full report in Codecov by Sentry.
|
✅ Deploy preview for gazebo ready!Previews expire after 1 month automatically.
|
| refsToSync: [codeDisplayOverlayRef, scrollBarRef], | ||
| }) | ||
| useSyncScrollLeft({ | ||
| scrollingRef: scrollBarRef, | ||
| refsToSync: [codeDisplayOverlayRef, textAreaRef], |
There was a problem hiding this comment.
This implies it's not possible to scroll the codeDisplayOverlayRef manually, right?
There was a problem hiding this comment.
Yes, the textarea overlays it, so that's what the user interacts with.
There was a problem hiding this comment.
Cool ok! just wanted to sanity check my understanding tyty
There was a problem hiding this comment.
They never actually "touch" the virtualized/tokenized code.
| const isOverflowing = useIsOverflowing(codeDisplayOverlayRef) | ||
|
|
||
| // sync the scroll position of the text area with the code display overlay and scroll bar | ||
| useSyncScrollLeft({ |
There was a problem hiding this comment.
I found the name of this hook confusing until I read the definition. Didn't know that scrollLeft was an element attribute. IMO useSyncScroll could be more clear, even though it's less specific. Nit though, your call.
There was a problem hiding this comment.
Gonna go with useScrollLeftSync so it reads a bit better, but I personally prefer the slightly more specific naming for clarity.
nicholas-codecov
deleted the
fix-scrolling-issues-with-virtual-renderers
branch
Description
This PR fixes some issues with the scrolling on the virtual renderers. Basically the issue was that on the diff renderer the last line was being covered up by the scroll bar so you're unable to see it (this is common in virtualized things like this). The solution was to create our own scroll bar that comes after the virtualized content and hook it up to the scrolling behaviour.
I've also tweaked the hit counters slightly, giving them a little extra breathing room.
Notable Changes
useIsOverflowinghook to determine if we need our custom scroll baruseSyncScrollLeftto sync the scroll left value between a base ref, and an array of refs to update when the base ref is scrolledtextareaand virtualized elementsScreenshots
Left side hit counter:
Scrolling example on diff viewer:
Screen.Recording.2024-10-29.at.10.22.08.mov
Scrolling example on file viewer:
Screen.Recording.2024-10-29.at.10.22.33.mov