Only show epic lane header shadow when it overlaps
What does this MR do and why?
Add an IntersectionObserver to track sticky-positioned epic lane header and apply a shadow to it only when it is overlapping lane content.
MR acceptance checklist
Screenshots or screen recordings
Before | After |
---|---|
Video of scrolling vertically:
Video of scrolling horizontally:
Screen_Recording_2024-03-01_at_19.48.48
How to set up and validate locally
- Check out this branch locally
- Navigate to an issue board in an EE enabled customer (Flightjs should be by default)
- If the board isn't already, group by epic. Assign some epics to issues if necessary to make sure there will be epic lanes.
- Expand the "Issues with no epic assigned" section to make sure that the page can be scrolled
- Scroll. You will see that for each epic lane, the epic lane title has sticky position and will stay pinned to the top of the scrollable area when the epic lane scrolls out of view. You should see that as this happens, a shadow is applied to the epic title header while it overlaps the content of the epic lane.
- Add enough lists that you can also scroll horizontally, then scroll horizontally. You'll see that the epic lane header buttons and text remain in view.
Related to #273779 (closed) and #424397 (closed)
Edited by Chad Lavimoniere