Make single-app mode truly responsive

[laflessn]

Single-app mode is not truly mobile responsive. You can't change the window size from small to big and have it adjust in real-time. Instead, it requires a reload of the page.  It appears as though the mobile layout is rendered based on some combination of screen size detection on load as well as device detection which leads to broken, or incomplete mobile layouts on some devices. This should be built to be truly responsive using css breakpoints (and js if/when needed listening to window on resize events).

[caseycesari]

Thanks for reporting this @laflessn. You are correct that some of the layout is decided when the page is loading (i.e. some JS initialization code), while other parts are more dynamic (i.e css media queries). In an effort to better address this, can you provide some devices where the site appears broken?

[laflessn]

From our developers: The only devices that are broken currently are desktop browsers when sized down to anything less than 760px wide. So this would be Safari, Firefox, IE, Edge, and Chrome on both Mac and Windows when sized below 760px in width. The framework doesn't dynamically detect the adjustment to a mobile size and adjust to the mobile layout. Instead, the desktop layout is retained and things begin to bleed over each other in the header, and eventually the map is no longer visible/usable. I've attached a screenshot of this issue in Chrome on my Macbook.

Additionally, if I load up an app in the mobile friendly SWA mode with my browser already at a mobile size the framework is still not recognizing this at initialization. This leads us to believe that the mobile mode is initialized based on device detection, rather than browser size detection. This is technically not "broken" as the site will render correctly on every mobile phone I've tried so far. However, it's generally a best practice to adjust for mobile based on browser width since a mobile layout is needed because of the physical amount of space on the screen rather than the specific kind of device.

[caseycesari]

Thanks for the additional information @laflessn. We'll work on fixing this.

Note to the developer that works on this issue:

• The issue here is that the elements in the header are adjusted on page load based on the size of the window. If this size changes, the elements are not updated. We'll want make this dynamic. Example code.
• To have the site adjust dynamically in the browser, I think we need to switch to using max-width instead of max-device-width. Example code