[FEATURE] Mobile-friendly / responsive UI

[Glavin001]

🚀 Feature

Fix how responsive the web pages are so they can be viewed and used effectively on mobile devices.

• [ ] Home page
• [ ] Experiments list
  • [ ] Scrollable logs of experiment

Motivation

I would love to be able to use LLM Studio while on the go. The web GUI makes it so nice to setup experiments, monitor them, and tweak that I found myself this weekend checking on my phone often. However, it was challenging considering the pages are not designed for mobile.

[Glavin001]

I'd be up for contributing this one.

[psinger]

Thanks for opening and being open to contribute here @Glavin001.

I think in general it is possible to make this work, needs changes in underlying Wave styling. But I think it might be far from trivial making everything mobile friendly - up to you to give it a spin.

[Glavin001]

Learning more about Wave -- really cool and impressed with how powerful it is for Python 🎉

I'll see what I can do this week or so and will keep it time-boxed. From my understanding, it would involve adding a new stylesheet with overriding CSS for desired elements by selecting their card name: https://wave.h2o.ai/docs/custom-css/#targetting-the-desired-element

[pascal-pfeiffer]

Thank you for working on this issue @Glavin001

Actually, you can define breakpoints for the layout.

layouts=[
    ui.layout(breakpoint="0px", width="1430px", zones=zones_small),
    ui.layout(breakpoint="768px", width="1430px", zones=zones_medium),
    ui.layout(breakpoint="1024px", width="1430px", zones=zones_large),
],

[pascal-pfeiffer]

Having the app more mobile friendly would be huge, so looking forward to what you will come up with. If there is anything that you see missing feature wise in H2O Wave, please also drop a note over at the Wave repository https://github.com/h2oai/wave