App doesn't scale on mobile browsers

[baffelli]

Description

First of all congratulations for the very good work! I wanted to try the demo you linked, but unfortunately the app page doesn't get scaled in mobile browsers. All you can see is the sidebar

Expected behavior

The dashboard should be responsive and scale according to the screen size.

vizro version

Latest

Python version

OS

Android 12

How to Reproduce

1. Open the demo on a mobile browser

Output

Code of Conduct

• [X] I agree to follow the Code of Conduct.

[Joseph-Perkins]

thank you @baffelli ! (and for raising the issue - the described behaviour is clear to understand)

the current version is optimised for desktop first, so currently this is expected behaviour for mobile devices (including Android and iPhone)

optimisation for mobile is on the roadmap for future development, and a pathway is identified for enabling it, so that will be added once necessary prior dependencies have been implemented, though there is no fixed timeframe for them yet (and we'll be able to revert back here as/when that is implemented)

(thanks again for raising the issue - it is very much appreciated!)

[Mjboothaus]

Yes looks promising although mobile viewing is not viable currently (iPhone).

For inspiration Streamlit.io have done an awesome job at auto-scaling their presentation layer.

[huong-li-nguyen]

Hello guys,

Good news! 🗞️

This should look much better in the latest vizro>=0.12.0 release. A default button has been added, letting you collapse/expand the side panel. It automatically collapses for portrait mode on mobile. Everything should also be scaled better now.

It's not our fully optimized mobile solution yet, but this should already be a significant improvement in the meantime 👍