Dashboard spacing after 26.5.0 Gridster to Gridstack change

Help
1

Noted the spacing changes on the dashboard presumably from recent Replace Gridster with Gridstack for dashboard widgets by laf · Pull Request #19517 · librenms/librenms · GitHub

I’ve no way currently to propose a proper fix/config option - so here’s my workaround to hopefully inspire someone else, and also solve your issue if you have the same. Not perfect, probably wrong, but a start.

Normally we see this:

image
image1020×359 61.4 KB

Now we get:

image
image973×249 52.9 KB

These bits are inline and need to be overridden, I can’t see where/how they are generated:

image

So I made a custom css file and roped it in, ran daily script again, and it’s all back more or less how it was before.

.grid-stack, .gs20, .grid-stack-animate {
  --gs-item-margin-top: 0px !important;
  --gs-item-margin-bottom: 4px !important;
  --gs-item-margin-right: 4px !important;
  --gs-item-margin-left: 0px !important;
}

lnms config:set webui.custom_css.+ css/custom/styles.css

2

Usually this stuff is controlled by options on the gridstack library call.

3

The default value for margins seems to be set to 10 on line 193 of resources/views/overview/default.blade.php.

10 seems excessive imo and creates unnecessary dead space, I set it to 2 and that seems more “sane”, so some default value between 2-4 would be my vote for a better “out-of-the-box” look.

While on the topic of the Overview-page there seems to have been some kind of regression where mouse-over “pop-ups” are confined to the widget-window again, the two widgets I’ve seen this behavior in is the “Top Interfaces” and “Top Errors” widgets, there might be more I’ve not tested all of them.