Skip to content

Style fixes for board top bar on small screens

Chad Lavimoniere requested to merge cl-20240301-board-top-bar-small-screen into master

What does this MR do and why?

Style fixes for board top bar on small screens

Fix spacing between rows of items in the small viewport version of the board header controls.

Changelog: fixed EE: true

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Breakpoint Before After
xs (<576px) gdk.test_3000_groups_flightjs_-_boards gdk.test_3000_groups_flightjs_-boards__3
sm (≥576px) gdk.test_3000_groups_flightjs_-boards__1 gdk.test_3000_groups_flightjs_-boards__4
md (≥768px) (no change) gdk.test_3000_groups_flightjs_-boards__6 gdk.test_3000_groups_flightjs_-boards__7
lg (≥992px) (no change) gdk.test_3000_groups_flightjs_-boards__2 gdk.test_3000_groups_flightjs_-boards__5

How to set up and validate locally

  1. Check out this branch locally
  2. Visit an issue board (for example http://gdk.test:3000/groups/flightjs/-/boards)
  3. Adjust your window size to match the breakpoints in the screenshots table above
  4. You will see that the layout of the board controls matches the screenshot

Related to #424397 (closed)

Edited by Chad Lavimoniere

Merge request reports