Skip to content

Migrate `gl-white-space-nowrap` to Tailwind equivalent

What does this MR do and why?

Related to #456634, #456616, #456589

The CSS utils task group is in the process of migrating legacy CSS utilities to the Tailwind equivalent. This MR migrates the gl-white-space-nowrap legacy utils to the Tailwind equivalent. Tailwind uses whitespace (without a dash between white and space) where-as our legacy utils use white-space. Did a bit of digging and it looks like Tailwind decided to use this naming because whitespace is typically one word (see https://github.com/tailwindlabs/tailwindcss/issues/776#issuecomment-474104838)

For anyone curious, it's because "whitespace" (no hyphen) is the proper term, according to Wikipedia at least: https://en.wikipedia.org/wiki/Whitespace_character

I kind of wish they had stuck with the CSS naming but also I can never remember which way it is in vanilla CSS so it doesn't really matter 😆

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

gl-white-space-nowrap is used in GitLab UI so that one won't be removed from css_in_js.js until we migrate it in GitLab UI

--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 609 definitions need to be migrated to Tailwind.
+ * The following 607 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -655,11 +655,9 @@ module.exports = {
   '.white-space-normal': { 'white-space': 'normal' },
   '.white-space-normal\\!': { 'white-space': 'normal !important' },
   '.white-space-nowrap': { 'white-space': 'nowrap' },
-  '.white-space-nowrap\\!': { 'white-space': 'nowrap !important' },
   '.white-space-pre-wrap': { 'white-space': 'pre-wrap' },
   '.white-space-pre-wrap\\!': { 'white-space': 'pre-wrap !important' },
   '.white-space-pre-line': { 'white-space': 'pre-line' },
-  '.md-white-space-nowrap': { '@media (min-width: 768px)': { 'white-space': 'nowrap' } },
   '.word-break-all': { 'word-break': 'break-all' },
   '.word-break-all\\!': { 'word-break': 'break-all !important' },
   '.word-break-word': { 'word-break': 'break-word' },

Admin messages

Before After
Screenshot_2024-05-02_at_8.30.11_AM Screenshot_2024-05-02_at_8.20.21_AM

MR sticky header

Before After
Screenshot_2024-05-02_at_8.29.39_AM Screenshot_2024-05-02_at_8.28.38_AM

How to set up and validate locally

Admin messages

  1. Go to /admin/broadcast_messages and add a new message
  2. Inspect the action buttons in the table

MR sticky header

  1. Go to a MR and scroll down so the sticky header is shown
  2. Inspect the sticky header title
Edited by Peter Hegman

Merge request reports