Responsive layout with Sections

[jonathankretzmer]

I think it would be a great enhancement to allow for different progress indicators depending on the form factor of the browser viewing it.

For example, a create a screen that has a Section component, with a vertical progress indicator works really well. However, for mobile clients under ~765pixels, the Section component will change to a single-column layout where the vertical progress indicator starts looking quite silly. At this point, it may be worthwhile to swap to one of the other progress indicators automatically.

Notes:

1. I tried implementing this using import FORM_FACTOR from '@salesforce/client/formFactor'; but it always returned Large. So we will probably need to use the window object to determine innerWidth as the best proxy. This obviously doesn't take into account the actual available width of the Flow Screen within the host (ExperienceCloud, etc.). How would we be able to check the width of the Flow screen?
2. We would need to hook into the window.addEventListener (which is supported in Lightning Locker since v46) and detect changes to the browser window to adjust this dynamically. (Good idea would be to debounce the event to improve performance).