Theme: Add Row Height option (including "Compact")

[joepavitt]

Description

• Adds a new "Row Height" field to the UI Themes
• Defaults to "Default (48px)"
  • Also provides "Comfortable (38px)" and "Compact (32px)
• Originally tried to do this solely through Vuetify's "Density" property, but it sizes heights very inconsistently for each widget, plus it didn't cover our own custom widgets
  • Ended up still setting this in Baseline.vue, but had to add in overrides for ui-button as that behaves differently to all others.
• Consistency in use of widget-row-height CSS variable to drive row height (and inheritance into widgets)
• Add in documentation for the new "Row Height" option

Related Issue(s)

Closes #1095

Examples

Default

Screen.Recording.2024-08-06.at.16.53.32.mov

Comfortable

Screen.Recording.2024-08-06.at.16.54.32.mov

Compact

Screen.Recording.2024-08-06.at.16.54.56.mov

[joepavitt]

Perhaps the most noticeable differences is in the UI Table (cc @thebaldgeek - know this'll be of interest for you)

Compact

Comfortable

Default

[thebaldgeek]

Thanks for the tag, it does look interesting.
Have you tested it on mobile? I wonder how the (card) view looks on the smaller screen.
BTW, I could not use this ui_table node on the website since it only displays 10 rows before the uncontrollable pagination cuts in and makes the table take up a ton more height and sort of breaks mobile view.
Great to see some progress to reducing the default jumbo size.

[joepavitt]

before the uncontrollable pagination cuts in

It is very controllable via the "Max Rows" option:

https://dashboard.flowfuse.com/nodes/widgets/ui-table.html#pagination

[gayanSandamal]

This looks good to me

[joepavitt]

this causes a change in the default width of the Fixed items, meaning users will need to narrow their groups