Skip to content

Remove several usages of `.gl-xs-w-full` utility

What does this MR do and why?

Remove several usages of .gl-xs-w-full utility

This removes some usages of the desktop-first .gl-xs-w-full utility. We are replacing them with mobile-first utils combinations. Some necessary utils were not yet part of GitLab UI, those have been added to a temporary stylesheet that will be migrated to GitLab UI in a follow-up.

Screenshots or screen recordings

Note: Only some screenshots and repro steps are provided. In some cases, I wasn't sure how to actually access the affected views. Considering that the fix is essentially the same in all cases, I did not put much effort into smoke-testing every single area so that I can move quickly towards getting rid of the (to-be) deprecated CSS util.

Context Preview
app/assets/javascripts/issues/list/components/issues_list_app.vue Screenshot_2023-11-06_at_4.01.56_PM
app/views/clusters/clusters/new_cluster_docs.html.haml Screenshot_2023-11-06_at_4.02.34_PM
app/views/clusters/clusters/connect.html.haml Same as above
app/views/invites/decline.html.haml NA
app/views/layouts/devise.html.haml Screenshot_2023-11-06_at_4.03.40_PM
ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_visualization_designer.vue NA
ee/app/assets/javascripts/analytics/repository_analytics/components/download_test_coverage.vue Screenshot_2023-11-06_at_4.04.17_PM
ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.vue Same as above
ee/app/assets/javascripts/escalation_policies/components/add_edit_escalation_policy_form.vue Screenshot_2023-11-06_at_4.05.18_PM
ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue Screenshot_2023-11-06_at_4.06.11_PM
ee/app/assets/javascripts/trials/components/trial_create_lead_form.vue NA
ee/app/assets/javascripts/usage_quotas/seats/components/remove_billable_member_modal.vue Screenshot_2023-11-06_at_4.06.41_PM
ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue NA
ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/filters/date_range_filter.vue NA
ee/app/views/registrations/groups/new.html.haml NA

How to set up and validate locally

  • app/assets/javascripts/issues/list/components/issues_list_app.vue
    • Enable the issues_list_drawer feature flag: echo "Feature.enable(:issues_list_drawer) | rails c".
    • Navigate to a project's issues list and click on some issue.
  • app/views/clusters/clusters/new_cluster_docs.html.haml
    • Navigate to :project > Operate > Kubernetes Clusters > Create a cluster.
  • app/views/invites/decline.html.haml
    • N/A
  • app/views/layouts/devise.html.haml
    • Access the sign-in form.
  • ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_visualization_designer.vue
    • N/A
  • ee/app/assets/javascripts/analytics/repository_analytics/components/download_test_coverage.vue
  • ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.vue
    • Same as above.
  • ee/app/assets/javascripts/escalation_policies/components/add_edit_escalation_policy_form.vue
  • ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
  • ee/app/assets/javascripts/trials/components/trial_create_lead_form.vue
    • N/A
  • ee/app/assets/javascripts/usage_quotas/seats/components/remove_billable_member_modal.vue
    • Navigate to Admin Area > Settings > Usage Quotas and click on Remove user.
  • ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue
    • N/A
  • ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/filters/date_range_filter.vue
    • N/A
  • ee/app/views/registrations/groups/new.html.haml
    • N/A

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Paul Gascou-Vaillancourt

Merge request reports