Scroll to top of tab when navigating between tabs
What does this MR do?
Updates behaviour when selecting merge request tabs so that if they have been scrolled if will reset them to the top. If they have not been scrolled, or are already at the top, it will just open the tab as usual. Clicking on the active tab will scroll to the top of the tab.
A min-height for the tab content container has been set with CSS to prevent the page from jumping when tab content has not been loaded. The tests have also been updated for the new behaviour.
I've tested this with Chrome and Firefox on Ubuntu at the moment. I have noticed one small issue which occurs when navigating from the Changes to another tab when the breakpoint size is small or medium. expandView
is used to display the right sidebar again, but this pushes the content down and the tabs will no longer be in their sticky position at the top of the page. As this happens after an animation I think that the only fix would be to call scrollToTabTop
again after a setTimeout
, but I don't think it's worthwhile. The content is pushed down when you toggle the sidebar without changing tabs anyway, so it hasn't been introduced by this commit, but I thought I should bring it up in case someone can think of a better way of handling it.
What are the relevant issue numbers?
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary -
Documentation created/updated via this MR -
Documentation reviewed by technical writer or follow-up review issue created -
Tests added for this feature/bug -
Tested in all supported browsers -
Conforms to the code review guidelines -
Conforms to the merge request performance guidelines -
Conforms to the style guides -
Conforms to the database guides -
Link to e2e tests MR added if this MR has Requires e2e tests label. See the Test Planning Process. -
Security reports checked/validated by reviewer
Closes #48874 (moved)