Extra padding applied to screens via sidebar selector when no sidebar is present in operations pages
Summary
On a selection of pages where there is no right side bar present, there is a CSS selector applied which gives padding to the right of the screen which should not be there.
This was first noticed on the error details page inside the error tracking section.
The offending piece of code is:
@media (min-width: 576px)
.right-sidebar-collapsed:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
padding-right: 62px;
}
Steps to reproduce
- Navigate to the Error Tracking page i.e. https://gitlab.com/Oregand/blueshinners/-/error_tracking/
- Select any open issue i.e. https://gitlab.com/Oregand/blueshinners/-/error_tracking/1488263839/details
- Resize page to mobile screen i.e. under 576px
- Bring page size back to desktop view
Example Project
https://gitlab.com/Oregand/blueshinners/-/error_tracking/1488263839/details
What is the current bug behavior?
The CSS selector applies an extra 62px
of padding to the right side of the screen when it should not.
What is the expected correct behavior?
There should be no extra padding applied to the right of the screen when there is no sidebar. Both the left and right side of the screen should have equal padding.
Relevant logs and/or screenshots
Output of checks
This bug happens on GitLab.com
Possible fixes
- Rework HTML to ensure the classes that trigger this query are not present on pages without a sidebar.
@media (min-width: 576px)
.right-sidebar-collapsed:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
padding-right: 62px;
}
Edited by David O'Regan