Roadmap markup relayout
What does this MR do?
Changes Epic Roadmap markup to use <div>
and <span>
instead of <table>
for better scroll performance and cleaner implementation
Why was this MR needed?
Current implementation of Roadmap is based on <table>
, where header and first column are fixed. Problem with this approach is that position: sticky;
cannot be utilized due to lack of browser support for sticky positioning on <table>
elements, hence we had to set inline style left
on elements which are required to remain sticky on scroll.
This MR replaces <table>
in favour of <div>
s and <span>
s where position sticky is fully functional for Chrome, Firefox, Safari and Edge (IE11 doesn't support it and treats it as position: relative;
). This allows for cleaner implementation of the layout and less hacks to deal with, leading to no side-effects as mentioned in #5068 (closed).
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary [ ] Documentation created/updated[ ] API support added-
Tests added for this feature/bug - Review
-
Has been reviewed by UX -
Has been reviewed by Frontend [ ] Has been reviewed by Backend[ ] Has been reviewed by Database
-
-
Conform by the merge request performance guides -
Conform by the style guides -
Squashed related commits together -
Internationalization required/considered [ ] If paid feature, have we considered GitLab.com plan and how it works for groups and is there a design for promoting it to users who aren't on the correct plan[ ] End-to-end tests pass (package-qa
manual pipeline job)
What are the relevant issue numbers?
Closes #5068 (closed), #4848 (closed)