Migrate remaining CI pages to container queries (the big one)

What does this MR do and why?

Migrate remaining CI pages to containers

This change migrates CI-related Vue components and SCSS files to use container queries.

The changes include:

• Updating various CI Vue components to use gl-* classes
• Adjusting pipeline_editor.scss to use container queries
• Migrating several verify HAML files to use gl-*

Technical details

This change migrates most devopsverify files, including JS HAML and CSS.

The migrations were done using this migration script

scripts/frontend/migrate_to_container_queries.mjs $(find app/assets/javascripts/ci/ -type f) # JS
scripts/frontend/migrate_to_container_queries.mjs $(find ee/app/assets/javascripts/ci/ -type f) # EE JS
scripts/frontend/migrate_to_container_queries.mjs $(find app/views/projects/artifacts/ -type f) # HAML
scripts/frontend/migrate_to_container_queries.mjs $(find app/views/projects/pipelines/ -type f) # HAML
scripts/frontend/migrate_to_container_queries.mjs $(find app/views/projects/ci/ -type f) # HAML
scripts/frontend/migrate_to_container_queries.mjs $(find ee/app/views/projects/settings/ci_cd/ -type f) # HAML
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/ci_status.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/build.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/pipeline.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/pipelines.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/pipeline_editor.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/pages/pipelines.scss
scripts/frontend/migrate_to_container_queries.mjs ee/app/assets/stylesheets/page_bundles/runners.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/log_viewer.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/xterm.scss
yarn run prettier --write $(git diff --name-only)

References

• https://gitlab.com/groups/gitlab-org/-/epics/18939

Screenshots or screen recordings

The are changes in a few pages of the application, I did some smoke testing here:

https://gdk.test:3000/my-group/my-project/-/artifacts	https://gdk.test:3000/explore/catalog	https://gdk.test:3000/my-group/my-components/-/ci/editor?branch_name=master
Project > Build > Artifacts	Explore > CI/CD Catalog	Project > Build > Pipeline Editor
The delete checkbox is repositioned in smaller sizes	The tabs reflow and some project info is realigned	The file list flows to the top of the editor, buttons on top of the editor flow correctly. Lint CI/CD sample flows to the left of the screen in small sizes.

https://gdk.test:3000/groups/my-group/-/settings/ci_cd#ci-variables	https://gdk.test:3000/my-group/my-project/-/jobs/?kind=BUILD	https://gdk.test:3000/groups/my-group/-/runners/dashboard
Group > CI/CD Settings > Variables	Project > Build > Jobs	Group > Build > Runners
Table of variables flows correctly	Jobs table flows correctly	Runners header and table elements flow correctly

How to set up and validate locally

You can switch between the new UI and the normal UI with:

1. Off: echo "Feature.disable(:tailwind_container_queries) && Feature.disable(:global_topbar) && Feature.disable(:paneled_view)" | bundle exec rails c
2. On: echo "Feature.enable(:tailwind_container_queries) && Feature.enable(:global_topbar) && Feature.enable(:paneled_view)" | bundle exec rails c

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.

Related to #567314