Skip to content

Drop desktop-first CSS utils

Paul Gascou-Vaillancourt requested to merge invalid-css-utils-migrations into master

What does this MR do and why?

This drops a few invalid desktop-first CSS utils. Some of those have made their way into GitLab UI as we did not have clear-enough guidelines for using mobile-first utils. We are now progressively migrating to a fully mobile-first approach.

This drops some of the least uses desktop-first utils.

  • The first 3 commits rewrite usages of the desktop-first gl-xs-display-none util to the mobile-first equivalent (gl-display-none gl-sm-*).
    • 99e36750: verifiable in an issue board, when clicking on Create list.
    • c47568ac: verifiable in a fork's project overview.
    • 75b4b395: verifiable in a projects list.
  • a7a1b481 drops the only usage of the desktop-first gl-xs-mb-4 util in favor of gl-gap-4, which lets us remove some complexity from the affected component, but also causes a small visual change in desktop.
  • e63a2fc1 drops the desktop-first gl-sm-pr-5 CSS utils from the projects' package and registries settings. This results in a visual change as well, but the padding in question seemed unnecessary.
  • 6f19be75 revisits the padding in projects' visibility settings the outermost padding, which varied depending on the viewport's width, is now set to a fixed value. The inner padding is rewritten with mobile-first utils.

Screenshots or screen recordings

Group > Analyze > CI/CD analytics (a7a1b481)

Visual change in desktop viewports. There's slightly more space between both stats:

Before After
Screenshot_2023-05-15_at_1.17.41_PM Screenshot_2023-05-15_at_1.17.11_PM

Project > Settings > Packages and registries (e63a2fc1)

Visual change in mobile viewports. The right padding has been removed from the select input:

Before After
Screenshot_2023-05-15_at_1.20.04_PM Screenshot_2023-05-15_at_1.19.35_PM

Project > Settings > Visibility, project features, permissions (6f19be75)

Visual change in desktop viewports. The outermost padding has been decreased to match the mobile viewports':

Before After
Screenshot_2023-05-15_at_1.22.21_PM Screenshot_2023-05-15_at_1.21.53_PM

How to set up and validate locally

  1. Visit the affected pages (see screenshots section above).

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Paul Gascou-Vaillancourt

Merge request reports