Prevent excessive vertical whitespace in grid layout
Problem
A recurring problem that we've seen when building dashboard panels using GridStack is excessive whitespace at the bottom of a panel. This is due to the fixed cellHeight imposed by GridStack.
Related discussions / previous attempts
- gitlab-org/gitlab#471368 (comment 2139248301)
- gitlab-org/gitlab#467997 (comment 2140489768)
- gitlab-org/gitlab#515872 (comment 2769752538)
- gitlab-org/gitlab#556404 (comment 2636546525)
- gitlab-org/gitlab#515211 (comment 2316287182)
- gitlab-org/gitlab#519521
- #2270
Possible solutions
1. Masonry grid
Switching to a masonry grid would allow for dynamic height for dashboard panels, since the Y-axis is staggered based on the content. This would reduce blank space on our existing dashboards, while still keeping separate columns for the X-axis.
The masonry grid does have the added downside of unpredictable loading states. We will gain dynamic height for panels, but loading will likely become more chaotic as panels shift around while content is loaded.
2. Reduce GridStack cellHeight
The cellHeight is currently set to 137px (code), but this could be reduced to reduce the whitespace at the bottom of panels.
This does not fix the issues present with dynamic height, but will give us a bit more control over the height of specific panels.