Skip to content

Migrate negative margin top utils to Tailwind in Vue files

What does this MR do and why?

Migrate negative margin top utils to Tailwind.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshot_2024-05-15_at_5.27.47_PM

Screenshot_2024-05-15_at_5.39.29_PM

CSS-in-Js diff

Generated with https://gitlab.com/-/snippets/3700897.

diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index a58bc0657f8d..14c5aa06263d 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 578 definitions need to be migrated to Tailwind.
+ * The following 572 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -475,15 +475,9 @@ module.exports = {
   '.py-6\\!': { 'padding-top': '1.5rem !important', 'padding-bottom': '1.5rem !important' },
   '.m-0\\!': { margin: '0 !important' },
   '.mt-0\\!': { 'margin-top': '0 !important' },
-  '.mt-n1': { 'margin-top': '-0.125rem' },
-  '.mt-n5': { 'margin-top': '-1rem' },
-  '.md-mt-n2\\!': { '@media (min-width: 768px)': { 'margin-top': '-0.25rem !important' } },
   '.mt-2\\!': { 'margin-top': '0.25rem !important' },
   '.mt-n2': { 'margin-top': '-0.25rem' },
-  '.mt-n2\\!': { 'margin-top': '-0.25rem !important' },
   '.mt-3\\!': { 'margin-top': '0.5rem !important' },
-  '.mt-n3': { 'margin-top': '-0.5rem' },
-  '.mt-n3\\!': { 'margin-top': '-0.5rem !important' },
   '.mt-4\\!': { 'margin-top': '0.75rem !important' },
   '.mt-5\\!': { 'margin-top': '1rem !important' },
   '.mt-6\\!': { 'margin-top': '1.5rem !important' },

How to set up and validate locally

Intentionally keeping the repro steps to a minimum here as the migrations are pretty straightforward but affect many areas. Follow these steps to test the areas showcased in the screenshots above:

  • In the admin area, create a broadcast message.
  • Navigate to your user preferences.

Related to #456630

Edited by Paul Gascou-Vaillancourt

Merge request reports