Skip to content

Fix display of y-axis scrollbar on issue sidebar

What does this MR do and why?

Currently when looking at an issue, the sidebar often has content that is invisible off the bottom of the page. It is only accessible if you make the font smaller, or use a mouse wheel to scroll.

This modifies the CSS for the issue page sidebar, so that a vertical scrollbar is made visible when there is content off the bottom of the screen. The current CSS shows evidence that a scrollbar was intended to be displayed, however, it was not in fact visible due to the element being too wide.

Screenshots or screen recordings

Screenshot from current live gitlab.com project, showing the issue page sidebar. The scrollbar seen here allows the main page content to be scrolled, but the sidebar content is fixed:

gitlab-no-scroll

Screenshot from a Gitpod instance showing the proposed change. The second scrollbar visible here allows the sidebar content to be scrolled when content overflows. The second scrollbar is only made visible when needed to avoid unnecessary visual distraction:

gitlab-fixed-scroll

How to set up and validate locally

  1. Visible the page for a single issue. For example #19145

  2. Ensure the right hand sidebar is expanded and observe what the last elements that can be accessed at the bottom of the sidebar are

  3. Resize the browser window, reducing its height, for example, to 600 pixels

  4. Observe that many of the sidebar bottom elements are now inaccessible unless the font size is reduced, or mouse wheel scrolling is used (if you have a mouse wheel at all).

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

I have reproduced the lack of scrollbars issue on Windows 11 with Microsoft Edge, and Linux (Fedora 34) using Firefox and Chromium, and likewise tested the proposed CSS change on the same desktop browsers.

Edited by Daniel P. Berrangé

Merge request reports