Limit ui-group size according to layout

[azabalo-developer]

Description

When the ui-page layout is defined as "Tabs," it is possible to set the number of columns for the responsive layout.

However, when a ui-group is defined within this layout, it is possible to size the group larger than the layout's defined columns. This causes misunderstandings when configuring the size and position of UI elements, as they do not render as expected in the responsive view.

Example:

(Once the layout was adjusted, everything displayed as expected)

To address this issue, it would be beneficial to:

1. Limit group size to the maximum size allowed by the configured layout columns.
2. Provide a warning when a group exceeds the layout's column definition, ensuring users are aware of the mismatch.

This enhancement would improve layout consistency and clarity during configuration.

Have you provided an initial effort estimate for this issue?

I am no FlowFuse team member

[colinl]

When the ui-page layout is defined as "Tabs," it is possible to set the number of columns for the responsive layout.

This does not only apply to the Tabs layout. It applies to all layouts except Fixed.

Does there also need to be a warning the other way round? If an attempt is made to reduce the max columns in the page settings to a lower value than the max group size?