Skip to content

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

  1. Navigate to the Error Tracking page i.e. https://gitlab.com/Oregand/blueshinners/-/error_tracking/
  2. Select any open issue i.e. https://gitlab.com/Oregand/blueshinners/-/error_tracking/1488263839/details
  3. Resize page to mobile screen i.e. under 576px
  4. 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

Screenshot_2020-02-04_17-07-40

Screenshot_2020-02-04_17-07-21

Screenshot_2020-02-04_17-07-07

Output of checks

This bug happens on GitLab.com

Possible fixes

  1. 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