Fix overflow issues for Roadmap
What does this MR do and why?
This addresses two separate styling problems affecting the Roadmap:
- The height of the milestones row was not taken into account when calculating the height of the placeholder empty Epic row at the bottom of the roadmap view, meaning it was always that much taller than the parent container
- The height of the scrollbar itself was not being taken into consideration, making the entire roadmap too tall. This was likely missed in development because it is only noticeable on an OS/browser where scrollbars are on by default (i.e., NOT on a mac).
Screenshots or screen recordings
Note the scrollbars on the right of each Before screenshot
| Before | After |
|---|---|
 |
 |
 |
 |
How to set up and validate locally
- IF ON A MAC: turn on System Settings > Appearance > Scroll bars > Always
- Check out this branch on your local
- Navigate to a Roadmap that has only a few Epics in it
- you should not see any vertical scrollbar on the right edge
- In a separate tab, go to the Admin area Appearance settings page (http://gdk.test:3000/admin/application_settings/appearance) and add a header and a footer
- Refresh your Roadmap page
- you should see the header and footer, and there should still be no vertical scrollbar on the right edge
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #433027 (closed)
Edited by Chad Lavimoniere