fix: convert gl-sm-pr-2 to mobile-first, remove gl-md-pr-2
Integration MR: gitlab!100306 (closed)
What does this MR do?
The .gl-sm-pr-2
and .gl-md-pr-2
CSS utils appear to only be used in app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
: https://sourcegraph.com/search?q=context:global+%28gl-sm-pr-2%7Cgl-md-pr-2%29+repo:%5Egitlab%5C.com/gitlab-org/%5B%5E/%5D%2B%24&patternType=regexp
After analyzing those usages, it appears that we're trying to add some padding to a table's cells on larger viewports, while the stacked layout, on mobile, does not need any padding. It should thus be possible to:
- Convert the currently desktop-first
.gl-sm-pr-2
CSS util to mobile-first. - Apply that util to all the cells that need the right padding, replacing
.gl-md-pr-2
where needed. As a result,.gl-md-pr-2
won't be used in any of our projects anymore, so we should be able to remove it. Theoretically, we should avoid removing any CSS util in case they are used in projects we don't control, but I would rather get rid of as many utils as possible as part of the desktop-first cleanup, and we can always re-add some later.
Edited by Paul Gascou-Vaillancourt