dashboard: Add responsiveness for smaller screens/resolutions

[Monviech]

Important notices

Before you add a new report, we ask you kindly to acknowledge the following:

• [x] I have read the contributing guide lines at https://github.com/opnsense/core/blob/master/CONTRIBUTING.md
• [x] I am convinced that my issue is new after having checked both open and closed issues at https://github.com/opnsense/core/issues?q=is%3Aissue

Is your feature request related to a problem? Please describe.

I have tried out the new dashboard while remotely accessing my firewall over VPN from an android phone. The default dashboard seems not to be responsive and adjust its widgets to smaller screens.

Describe the solution you like

The css could dynamically adjust colums or widget size based on screen size so it looks nicer. I don't know though, it's just feedback. Maybe depending on screen resolution, the widgets could align differently in the grid/columns.

Describe alternatives you considered

Manually moving all widgets into a single row and saving could work, though then it wouldn't look good in bigger screens.

Additional context

Here is a screenshot from my phone:

[swhite2]

Unfortunately, the CSS media queries are static and do not play well with the dynamic nature of the widgets, this will have to be adjusted in Javascript.

I was wondering about making the number of columns configurable, but this prompts me to simply determine the right number of columns based on the viewport width.

[swhite2]

@Monviech https://github.com/opnsense/core/commit/0bb13de0feca6e7468813011d2177c18d65792c8 should fix it.

[Monviech]

Sweet I'll try it out later. Thank you.

[Monviech]

I think it works great.

Theres only a little bit of jank when you resize the window to a smaller size, move the widgets around, save, and then resize the window a few times. Some widgets forget the row they are in and there's an empty middle row appearing.

Additionally, when you enlarge widgets over two or three rows, save and resize the window a few times, this seems to get forgotten too and the widgets snap back to one row.

This seems like it will be hard to fix though.

[swhite2]

@Monviech I saw this during testing as well, seems to be an upstream GridStack issue. A reload of the page will always lead to consistent widths/heights though (I do believe gridstack gets confused when a lower number of columns have been saved while loading it into a page with an increased number of columns).

There is some logic being executed when widgets are resized which could potentially slow the page down - but I think the bulk of this are Chart.js internals which we have little control over. You can play around with the time limit in the debounce() function in the widget manager, which should limit the number of onWidgetResize() executions.

I've not come around to optimizing things thoroughly just yet, if you see any potential improvements let me know :)

[swhite2]

The situation should be somewhat better with https://github.com/opnsense/core/commit/8a5789840c6a22e784ca5d443daab3f064fbc7e9. The only remaining issue I see is that reloading a page which is smaller than the original persisted one will not snap back to the original dashboard when enlarging the window to the original size. A reload will fix this, which it didn't before this commit.