Workshop application display dynamics

Workshop application displays dynimically based on user zoom levels or display size. How do I make sure application displays same irrespective of that display size (Similar to a % instead of px?)

Should I use flex everywhere

But few widgets will become compressed.

This is a problem that I often face and solve it by

  • using a combination of Flex and auto max sizing and I avoid using absolute(mentioned in the documentation).
  • I also like to organize my widgets with sections inside a section and this helps with the alignment of the widgets.

This way I can create a responsive layout that adapts to different screen sizes and keeps the widgets visible. If I notice any widget getting compressed I will adjust the flex ratios or ayout structure to give the widget more space.

Agreed, but when a button group widget is constrained by the width of its parent section, it will shrink to fit only the space available to show *n buttons; otherwise the UI collapses and we end up with a “…“ for the remaining buttons

For the following setting of the button widget :
Button group→Inline→Horizontal, Tag, Regular