Migrate `gl-vertical-align-bottom` and `gl-vertical-align-top`
What does this MR do and why?
Related to #456643 (closed), #456594 (closed)
The CSS utils task group is in the process of migrating legacy CSS utilities to the Tailwind equivalent. This MR migrates gl-vertical-align-top
to gl-align-top
and gl-vertical-align-bottom
to gl-align-bottom
(https://tailwindcss.com/docs/vertical-align). They use the exact same CSS properties so we just need to change the name of the actual util.
Note: config/helpers/tailwind/css_in_js.js
won't change yet since gl-vertical-align-top
and gl-vertical-align-bottom
are used in src/components/experimental/duo/chat/duo_chat.vue#L480 and src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.vue#L79. When we migrate those utils in GitLab UI they will be removed from config/helpers/tailwind/css_in_js.js
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-align-top
Before | After |
---|---|
gl-align-bottom
Before | After |
---|---|
How to set up and validate locally
gl-align-top
Go to a group, inspect the notifications dropdown
gl-align-bottom
Go to an issue board, inspect the milestone icon on one of the issues