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) |
||
sm (≥576px) (note extra space on right of before) |
||
md + (≥768px) no change |
Without new create issue dropdown (aka "New issue" is just a button)
Breakpoint | Before | After |
---|---|---|
xs (<576px) |
||
sm (≥576px) (note extra space on right of before) |
||
md + (≥768px) no change |
Group issues
How to set up and validate locally
- Check out this branch locally
- visit a project issues list (for example http://gdk.test:3000/flightjs/Flight/-/issues)
- Adjust viewport to match each of the breakpoints in the screenshots above, what you see should match the screenshots.
- You can test the OKR version by either enabling or disabling the
okrs_mvp
feature flag in your GDK (it is enabled by default). - Visit a group issues list (for example http://gdk.test:3000/groups/flightjs/-/issues)
- 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