Calculate board height in CSS
What does this MR do and why?
Clean up board height calculation to be "use all available space", rather than a bunch of calculations.
Previously it was using ResizeObserver in JS, which was expensive and timingout lots (spamming sentry with errors), and buggy when resizing sometimes.
We also had a bunch of rules using $issue-boards-filter-height, which was not always correct – either with visible scrollbar on filter bar, or when items wrapped.
Also only show x scrollbar when needed (auto instead of scroll) to give slightly more vertical space when possible.
No visual changes otherwise:
Screen_Recording_2023-05-02_at_19.25.40
| issue board | swimlanes | epic board | header / footer |
|---|---|---|---|
 |
 |
 |
 |
How to set up and validate locally
For both Issue boards & Epic boards, test a range of sizes (mobile / desktop /
- Check lists are full height of the page
- Test boards in Focus Mode (click icon at top right of board)
- Add system footer/header (Admin > Settings > Appearance)
- (issue boards only) Enable swimlanes and check scrolling still works (then whole page scrolls, headers stick)
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.