Skip to content

Fix style problems for issues list on small screen

What does this MR do and why?

Fix style problems for issues list on small screen

  • Previously, a 62px right padding was applied to the page to make room for a sidebar that was not used on this page
  • cleanup new issue dropdown problems
  • Adjust layout of Bulk edit/New issue buttons so that they remain side by side on small screens

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

Project issues

With new create issue dropdown (for OKRs; EE only)

Breakpoint Before After
xs (<576px) gdk.test_3000_flightjs_Flight_-issues__4 gdk.test_3000_flightjs_Flight_-issues__6
sm (≥576px) (note extra space on right of before) gdk.test_3000_flightjs_Flight_-issues__5 gdk.test_3000_flightjs_Flight_-issues__7
md+ (≥768px) no change Flight_issues__7_ Flight_issues__19_

Without new create issue dropdown (aka "New issue" is just a button)

Breakpoint Before After
xs (<576px) gdk.test_3000_flightjs_Flight_-issues__2 gdk.test_3000_flightjs_Flight_-_issues
sm (≥576px) (note extra space on right of before) gdk.test_3000_flightjs_Flight_-issues__3 gdk.test_3000_flightjs_Flight_-issues__1
md+ (≥768px) no change Flight_issues__11_ Flight_issues__15_

Group issues

Breakpoint Before After
xs (<576px) gdk.test_3000_groups_flightjs_-_issues gdk.test_3000_groups_flightjs_-issues__3
sm (≥576px) (note extra space on right of before. Note also that the new issue dropdown for Groups cannot be styled to match the new issue with OKR dropdown seen above for issues until changes are made upstream in Pajamas) gdk.test_3000_groups_flightjs_-issues__1 gdk.test_3000_groups_flightjs_-issues__4
md+ (≥768px) no change gdk.test_3000_groups_flightjs_-issues__5 gdk.test_3000_groups_flightjs_-issues__2

How to set up and validate locally

  1. Check out this branch locally
  2. visit a project issues list (for example http://gdk.test:3000/flightjs/Flight/-/issues)
  3. Adjust viewport to match each of the breakpoints in the screenshots above, what you see should match the screenshots.
  4. You can test the OKR version by either enabling or disabling the okrs_mvp feature flag in your GDK (it is enabled by default).
  5. Visit a group issues list (for example http://gdk.test:3000/groups/flightjs/-/issues)
  6. Adjust viewport to match each of the breakpoints in the screenshots above, what you see should match the screenshots. (note: the OKRs feature flag has no effect on this issues list)

Related to #424397 (closed)

Edited by Chad Lavimoniere

Merge request reports