Skip to content

Fix layout of issue list top area on small viewports

Chad Lavimoniere requested to merge 20240620-clavimoniere-issues-list-top-area-styles into master

What does this MR do and why?

Fix layout of issue list top area on small viewports

Screenshots or screen recordings

Project issues list

Size Before After
xs (<576px) gdk.test_3000_flightjs_Flight_-issues__2 gdk.test_3000_flightjs_Flight_-_issues
sm (>=576px) gdk.test_3000_flightjs_Flight_-issues__3 gdk.test_3000_flightjs_Flight_-_issues (4).png

Group issues list

Size Before After
xs (<576px) gdk.test_3000_groups_flightjs_-_issues gdk.test_3000_groups_flightjs_-issues__3
sm (>=576px) gdk.test_3000_groups_flightjs_-issues__1 gdk.test_3000_groups_flightjs_-_issues (4).png

Other areas that use <filtered-search-bar>

This MR includes some style changes to the <filtered-search-bar> component.

Abuse reports

Size Before After
xs (<576px) gdk.test_3000_admin_abuse_reports_status_open gdk.test_3000_admin_abuse_reports__2_
sm (>=576px) gdk.test_3000_admin_abuse_reports_status_open__1_ gdk.test_3000_admin_abuse_reports (4).png

Roadmap filters

Size Before After
xs (<576px) gdk.test_3000_groups_flightjs_-_roadmap_state_all_sort_START_DATE_ASC_layout_WEEKS_timeframe_range_type_CURRENT_QUARTER_progress_WEIGHT_show_progress_true_show_milestones_true_milestones_type_ALL_show_labels_true gdk.test_3000_groups_flightjs_-roadmap_state_all_sort_START_DATE_ASC_layout_WEEKS_timeframe_range_type_CURRENT_QUARTER_progress_WEIGHT_show_progress_true_show_milestones_true_milestones_type_ALL_show_labels_true__3
sm (>=576px) gdk.test_3000_groups_flightjs_-roadmap_state_all_sort_START_DATE_ASC_layout_WEEKS_timeframe_range_type_CURRENT_QUARTER_progress_WEIGHT_show_progress_true_show_milestones_true_milestones_type_ALL_show_labels_true__1 gdk.test_3000_groups_flightjs_-roadmap_state_all_sort_START_DATE_ASC_layout_WEEKS_timeframe_range_type_CURRENT_QUARTER_progress_WEIGHT_show_progress_true_show_milestones_true_milestones_type_ALL_show_labels_true__2

How to set up and validate locally

  1. Check out this branch
  2. Visit a project issue list
  3. Open the dev tools and use the responsive device mode to set the viewport width to less than 576px (or use the Simulator app on your mac to open the GDK in safari on a simulated iPhone)
  4. Visit each of the pages that screenshots are provided for above

Merge request reports