The issuable sidebar cannot be scrolled without scrollwheel when the screen is short
Summary
When editing an Issue, and expanding the Issuable Sidebar (the one on the right). When I try to add a new Label, I'm not able to click the "Save Button" because it's off screen and there is no indication that the panel is scrollable or that it continues. I'm using a resolution of 1366 x 768
Steps to reproduce
DO NOT USE THE SCROLLWHEEL AT ANY MOMENT.
- Set the resolution to 1366 * 768 or resize the browser window until you can't see the widget o references section.
- Edit an Issue
- Expand the Issuable Sidebar (the one on the right)
- Go to the labels panel and press "Edit"
- A list of labels are displayed. If you have labels already, you won't see the "New label" option You can do a invalid search, and then you will see it. 6a. If you are able to click on New Label, the new label panel appears 7a. In the new label panel there is no chance to click on save or create
Example Project
An example, in the issue: https://gitlab.com/gitlab-org/gitlab-ce/issues/34527 You aren't able to see the participants
What is the current bug behavior?
There should be a way to scroll those panels. I cannot save the new label. I had to ctrl +alt + right, to change the direction of the screen to be able to do that.
What is the expected correct behavior?
Add a scrollbar to every scrollable panel.
Relevant logs and/or screenshots
Output of checks
This bug happens on GitLab.com
Possible fixes
Add a scrollbar to the scrollable panels. Or a way to indicate that it can be scrollable... Maybe in the application css, change to something like this. I don't handle css that well...
.right-sidebar {
position: absolute;
top: 50px;
bottom: 0;
right: 0;
transition: width .3s;
background: #fafafa;
z-index: 200;
overflow: hidden;
}
for
.right-sidebar {
position: absolute;
top: 50px;
bottom: 0;
right: 0;
transition: width .3s;
background: #fafafa;
z-index: 200;
overflow-y: auto;
overflow-x: hidden;
}