GitLab UI integration test for 2983-stacked-table-cqs
What does this MR do and why?
Integration MR for gitlab-org/gitlab-services/design.gitlab.com!5077 (merged).
This integrates the changes from gitlab-org/gitlab-services/design.gitlab.com!5077 (merged) where GlTable has been made container queries ready. These integration changes are not required, but they do improve how the vulnerability list table looks by using the same mixins as GlTable now does to adjust the looks of the table depending on the viewport. Without these changes, there will be some layout breakages on some viewport sizes where the legacy media query and the new container queries are out of sync. These breakages only affect folks who have the tailwind_container_queries feature flag enabled. Others will get the same UX as usual.
Whether or not we merge this integration MR, the visual quirks will eventually get fixed as part of the overarching CQs migration where we'll eventually migrate those old mixinso the new ones.
Other tables might be affected, but we are focusing on the vulnerability list as an example here. Again, the reasoning is the same for other tables: they might slightly break if the tailwind_container_queries FF is enabled, until the associated stylesheets/utils are migrated to CQs.
References
Screenshots or screen recordings
| Before | After |
|---|---|
| before | after |
How to set up and validate locally
- Enable the
tailwind_container_queriesfeature flag. - Navigate to a project's vulnerability list.
- Resize the window to see how the table reacts to different container sizes.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.