Support for mobile layout

[fongsean]

The renderer doesn't really support viewing on mobile devices at the moment.

Might be a good idea to dynamic adjust form fields to overflow to the next line when a screen width threshold is reached.

Complex items like grids, group tables might take more effort to address.

[brendan-cheong]

Hi @fongsean, our user experience team loves this idea. They are very keen for the form field labels to appear above the form field inputs at a screen width of 768 pixels.

[fongsean]

Hi @brendan-cheong,

I'm working on a set of library APIs to tweak rendering behaviours that SDC doesn't provide extensions for. I've added a itemLabelGridBreakpoints and itemFieldGridBreakpoints to allow the user to specify breakpoints where the item label and item field will "break" to separate lines.

itemLabelGridBreakpoints and itemFieldGridBreakpoints uses the below interface:

export interface ItemGridBreakpoints { xs?: number, sm?: number, md?: number, lg?: number, xl?: number }

Each (xs, sm, etc) of these values should total to 12 if you want the label and the field on the same line.
If you want them on separate lines, setting both to 12 should do the trick.
The defaults are:

itemLabelGridBreakpoints: { xs: 12, md: 4 },
itemFieldGridBreakpoints: { xs: 12, md: 8 },

By default, screen width above md will have a 1:2 ratio for labels and their fields on the same row. Below md, they will form two rows.

Note: the breakpoints are based on the screen width, not the renderer width. It does require more refinement if we want it to be based on the renderer width.

These new library APIs are currently in the alpha release of the library, but I imagine there could be breaking changes between different alpha versions (not yet so far), so proceed with caution. itemLabelFontWeight seems like one that will be removed eventually. There are also no documentation on how to use these APIs yet.

See: https://github.com/aehrc/smart-forms/blob/alpha/packages/smart-forms-renderer/src/stores/rendererStylingStore.ts