Responsiveness: Config to control responsive column counts

[colinl]

Description

Currently the columns rendered varies with screen width as described in https://dashboard.flowfuse.com/layouts/types/grid.html and the equivalent for Fixed layout. These can be overridden by CSS but it would be convenient to have this configurable in the ui-page setup.

Have you provided an initial effort estimate for this issue?

I am not a flowfuse team member

[joepavitt]

Trying to work out if this makes sense to live at the UI Base config (and apply to all pages then using Grid) or if it makes sense to have at the Page-Level, where you'd then have to copy it across all pages you want it applied

[colinl]

One of my interfaces is a tablet in landscape mode, but it also needs to work on a phone in portrait mode. On some pages I have used two groups which have to fit side by side on the tablet, and above each other on the phone. This requires juggling of group widths and number of columns to get everything to fit nicely. I have managed to get something acceptable with just global column setting using CSS, but ideally it would be better if I had individual control per page. How much of a requirement for others that is I do not know.

[joepavitt]

At the page-level seems sensible, with a a "copy to all pages" button I think?

[joepavitt]

First iteration will be just controlling the number of columns rendered at each (default) breakpoint. Later we can consider control over the breakpoints too.