Skip to content

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
Screenshot_2024-04-23_at_1.55.57_PM Screenshot_2024-04-23_at_1.51.13_PM

gl-align-bottom

Before After
Screenshot_2024-04-23_at_1.54.43_PM Screenshot_2024-04-23_at_1.53.28_PM

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

Edited by Peter Hegman

Merge request reports