Analytics dashboard columns are no longer responsive
Problem to solve
As was found in !138150 (comment 1679231022) analytics dashboards columns are no longer responsive. Instead of defaulting to 1 column on small viewports the grid now sticks to 12 columns which makes our dashboards difficult to use on smaller windows.
This seems to have happened due to a recent upgrade breaking change in Update dependency gridstack to v10 (!137487 - merged).
1 column mode switch is no longer by default (responsive is not defined) as too many new users had issues. Instead set it explicitly (see above).
Screenshot
Suggested solution
Update the gridstack options in customizable_dashboard.vue
to render the grid as a single column for small viewports as suggested by the upgrade guide:
- disableOneColumnMode, oneColumnSize have been removed (thought we temporary convert if you have them). use { responsive: breakpoints: [{w:768, c:1}] } for the same behavior.
- 1 column mode switch is no longer by default (responsive is not defined) as too many new users had issues. Instead set it explicitly (see above).
- oneColumnModeDomSort has been removed. Planning to support per column layouts at some future times. TBD
Implementation plan
frontend
- Update
customizable_dashboard.vue
with the latest gridstack options to enable a responsive 1 column mode on small viewports. - Update specs.
Potential process improvement
Document or make part of the gridstack upgrade review process to verify grid responsiveness.