Migrate project repository settings to container queries

What does this MR do and why?

Note: some styles are not migrated yet

The targeted page contains many tables that are not yet updated to use container queries. These will not be resolved until https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2983+ is resolved.

Migrate project settings to container queries

Files checked during this migration:

/app/assets/javascripts/deploy_keys/components/action_btn.vue
/app/assets/javascripts/deploy_keys/components/app.vue
/app/assets/javascripts/deploy_keys/components/confirm_modal.vue
/app/assets/javascripts/deploy_keys/components/key.vue
/app/assets/javascripts/deploy_keys/components/keys_panel.vue
/app/assets/javascripts/deploy_keys/index.js
/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
/app/assets/javascripts/deploy_tokens/index.js
/app/assets/javascripts/deploy_tokens/init_revoke_button.js
/app/assets/javascripts/mirrors/mirror_repos.js
/app/assets/javascripts/mirrors/ssh_mirror.js
/app/assets/javascripts/pages/projects/settings/branch_rules/index.js
/app/assets/javascripts/pages/projects/settings/repository/show/index.js
/app/assets/javascripts/persistent_user_callouts.js
/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
/app/assets/javascripts/projects/settings/branch_rules/mount_branch_rules.js
/app/assets/javascripts/projects/settings/components/default_branch_selector.vue
/app/assets/javascripts/projects/settings/mount_default_branch_selector.js
/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
/app/assets/javascripts/projects/settings/repository/branch_rules/mount_branch_rules.js
/app/assets/javascripts/projects/settings/repository/maintenance/mount_repository_maintenance.js
/app/assets/javascripts/protected_branches/protected_branch_create.js
/app/assets/javascripts/protected_branches/protected_branch_edit.js
/app/assets/javascripts/protected_tags/protected_tag_create.js
/app/assets/javascripts/protected_tags/protected_tag_edit.vue
/app/views/projects/branch_defaults/_branch_names_fields.html.haml
/app/views/projects/branch_defaults/_default_branch_fields.html.haml
/app/views/projects/branch_defaults/_show.html.haml
/app/views/projects/branch_rules/_show.html.haml
/app/views/projects/mirrors/_authentication_method.html.haml
/app/views/projects/mirrors/_branch_filter.html.haml
/app/views/projects/mirrors/_disabled_mirror_badge.html.haml
/app/views/projects/mirrors/_instructions.html.haml
/app/views/projects/mirrors/_mirror_repos_form.html.haml
/app/views/projects/mirrors/_mirror_repos_list.html.haml
/app/views/projects/mirrors/_mirror_repos_push.html.haml
/app/views/projects/mirrors/_mirror_repos.html.haml
/app/views/projects/mirrors/_ssh_host_keys.html.haml
/app/views/projects/protected_tags/_create_protected_tag.html.haml
/app/views/projects/protected_tags/_index.html.haml
/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
/app/views/projects/protected_tags/shared/_dropdown.html.haml
/app/views/projects/settings/_branch_rules_callout.html.haml
/app/views/projects/settings/repository/_protected_branches.html.haml
/app/views/projects/settings/repository/show.html.haml
/app/views/protected_branches/_index.html.haml
/app/views/shared/_remote_mirror_update_button.html.haml
/app/views/shared/deploy_keys/_index.html.haml
/app/views/shared/deploy_tokens/_index.html.haml
/app/views/shared/deploy_tokens/_table.html.haml
/ee/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
/ee/app/assets/javascripts/pages/projects/settings/repository/show/ee_mirror_repos.js
/ee/app/assets/javascripts/pages/projects/settings/repository/show/index.js
/ee/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
/ee/app/assets/javascripts/projects/settings/branch_rules/mount_branch_rules.js
/ee/app/views/projects/branch_defaults/_branch_names_help.html.haml
/ee/app/views/projects/mirrors/_branch_name_regex.html.haml
/ee/app/views/projects/mirrors/_mirror_branches_setting_badge.html.haml
/ee/app/views/projects/mirrors/_table_pull_row.html.haml
/ee/app/views/projects/push_rules/_index.html.haml
/ee/app/views/projects/settings/repository/_protected_branches.html.haml
/ee/app/views/protected_branches/ee/_branches_list.html.haml
/ee/app/views/protected_branches/ee/_create_protected_branch.html.haml
/ee/app/views/protected_branches/ee/_index.html.haml
/ee/app/views/protected_branches/ee/_protected_branch_access_summary.html.haml
/ee/app/views/protected_branches/ee/_protected_branch.html.haml
/ee/app/views/shared/promotions/_promote_repository_features.html.haml
/ee/app/views/shared/promotions/_promotion_link_project.html.haml
/ee/app/views/shared/push_rules/_commit_committer_check_setting.html.haml
/ee/app/views/shared/push_rules/_commit_committer_name_check_setting.html.haml
/ee/app/views/shared/push_rules/_form.html.haml
/ee/app/views/shared/push_rules/_reject_commits_not_dco_signed_setting.haml
/ee/app/views/shared/push_rules/_reject_unsigned_commits_setting.html.haml

References

Screenshots or screen recordings

Due to the outstanding table styles necessary to support stacked tables with container queries, there are not yet any significantly noticeable changes in appearance or behavior with these changes.

How to set up and validate locally

  1. Check out this branch
  2. Visit the "Repository settings" page for a project (e.g., http://gdk.test:3000/flightjs/Flight/-/settings/repository)

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 #559660

Edited by Chad Lavimoniere

Merge request reports

Loading