Adjust styling of Merge request analytics filters bar

What does this MR do and why?

Adjust styling of Merge request analytics filters bar to match search/filter bars in other places in GitLab

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

Screenshots or screen recordings

Viewport size Before After
xs (<576px) gdk.test_3000_flightjs_Flight_-analytics_merge_request_analytics_start_date_2023-12-05_end_date_2024-12-04__6 gdk.test_3000_flightjs_Flight_-_analytics_merge_request_analytics_start_date_2023-12-02_end_date_2024-12-01
sm (>=576px) gdk.test_3000_flightjs_Flight_-analytics_merge_request_analytics_start_date_2023-12-05_end_date_2024-12-04__7 gdk.test_3000_flightjs_Flight_-analytics_merge_request_analytics_start_date_2023-12-02_end_date_2024-12-01__3
md (>=768px) gdk.test_3000_flightjs_Flight_-analytics_merge_request_analytics_start_date_2023-12-05_end_date_2024-12-04__8 gdk.test_3000_flightjs_Flight_-analytics_merge_request_analytics_start_date_2023-12-05_end_date_2024-12-04__11
lg (>=992px) gdk.test_3000_flightjs_Flight_-analytics_merge_request_analytics_start_date_2023-12-05_end_date_2024-12-04__9 gdk.test_3000_flightjs_Flight_-analytics_merge_request_analytics_start_date_2023-12-02_end_date_2024-12-01__2
xl (>=1200px) gdk.test_3000_flightjs_Flight_-analytics_merge_request_analytics_start_date_2023-12-05_end_date_2024-12-04__10 gdk.test_3000_flightjs_Flight_-_analytics_merge_request_analytics_start_date_2023-12-05_end_date_2024-12-04

How to set up and validate locally

  1. Check out this branch
  2. Visit the MR analytics page for a project in the GDK (for example, http://gdk.test:3000/flightjs/Flight/-/analytics/merge_request_analytics)
  3. You will see that at various viewport widths, the design of the filter bar matches the After images above
Edited by Chad Lavimoniere

Merge request reports

Loading