Skip to content

Migrate negative right margin utils to Tailwind in CI

What does this MR do and why?

Migrate negative right margin utils to Tailwind in CI

Migrates legacy negative right margin CSS utils to their Tailwind equivalents in CI components.

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-24_at_10.36.46_AM

How to set up and validate locally

  1. Archive a personal project.
  2. Navigate to your profile page.

CSS-in-Js diff

diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index 059f737c8923..397076c0d1cb 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 547 definitions need to be migrated to Tailwind.
+ * The following 544 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -461,13 +461,10 @@ module.exports = {
   '.mt-5\\!': { 'margin-top': '1rem !important' },
   '.mt-6\\!': { 'margin-top': '1.5rem !important' },
   '.mr-0\\!': { 'margin-right': '0 !important' },
-  '.mr-n1': { 'margin-right': '-0.125rem' },
-  '.mr-n2': { 'margin-right': '-0.25rem' },
   '.mr-2\\!': { 'margin-right': '0.25rem !important' },
   '.mr-3\\!': { 'margin-right': '0.5rem !important' },
   '.mr-n3': { 'margin-right': '-0.5rem' },
   '.mr-4\\!': { 'margin-right': '0.75rem !important' },
-  '.mr-n4\\!': { 'margin-right': '-0.75rem !important' },
   '.sm-mr-3': { '@media (min-width: 576px)': { 'margin-right': '0.5rem' } },
   '.mb-0\\!': { 'margin-bottom': '0 !important' },
   '.mb-1\\!': { 'margin-bottom': '0.125rem !important' },

Related to #456630 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports