Skip to content

fix: convert gl-sm-pr-2 to mobile-first, remove gl-md-pr-2

Paul Gascou-Vaillancourt requested to merge gl-sm-pr-2-mobile-first into main

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

Merge request reports