Replace and remove CSS Class mw-s, mw-m, mw-l, mw-xl

Implementation Guide

Problem to solve

As a developer, I want to clean up a legacy CSS file. Specifically the CSS Class mentioned in the issue title. The file utilities.scss existed before we created GitLab's own Utility classes coming from gitlab/ui.

Proposal

• These CSS Classes are used in app/assets/javascripts/vue_shared/components/registry/metadata_item.vue.
• Execute one of the following alternatives:
  • When it is really a util class and a Tailwind CSS equivalent exists: Replace & Remove:
    • Replace all CSS Class usages with a modern Utility CSS Class applying the identical style
    • Remove the CSS Class in utilities.scss
  • When the CSS Class is actually needed: Move & Rename:
    • Move the CSS Class definition to a project based CSS file
    • If the CSS Class started with gl-, rename it. This prefix is reserved for gitlab/ui Util CSS Classes.

Further details

• Check out the SCSS style guide for more information about the deprecated utilities.scss file and the new Utility Classes based on Tailwind CSS.
• Check out the Tailwind Defaults. Be careful that wegitlab/ui` has another spacing scale than the official one from TailwindCSS

For any questions, consider asking/tagging members of the CSS Utilities Task Group

If you are a community contributor, and like to work on this issue, please execute the following steps:

1. Open a MR with a possible solution. It does not have to be perfect or complete yet.
2. Write a comment in this issue that you'd like to work on this issue. Add a link to your MR in the comment. The MR can still be in Draft state.
3. Once ready for review, look for a message from the Dangerbot in your MR comments. It will propose reviewers to you from the Reviewer Roulette. If there are none, you can find reviewers here: https://gitlab-org.gitlab.io/gitlab-roulette/?visible=reviewer%7Cfrontend.
4. That's it. Thank you very much!