Improve layouts for small devices

[huong-li-nguyen]

Description

• Improve mobile layouts for xs and s devices
• Automatically collapse left-side if small devices are detected
• Remove grid and switch to flex if small devices are detected
• Zoom out of screen to scale Plotly charts properly
• Declutter charts in demo app
  • Remove redundant color legends (e.g. if colors are clear from axis labels already)
  • Resize colorbars and move titles to side
  • Shorten chart titles
  • Set automargin for y and x-axes
  • Remove facets as it was barely visible
  • Turn on pagination for table
  • Remove selected charts that didn't add any value to the dashboard (but we've initially added it in to show certain features which we now have the feature demo dashboard for)
• Remove yaml version for demo dashboard

Note: This is only meant as a quick fix and should by no means be our fully fledged mobile solution. For this we need to refactor our CSS code and components to be fully mobile compatible, which might be simplified if we switch to Bootstrap.

Screenshot

After: This is how it looks like using the dev-tools now e.g. for an Iphone:

Before:

Notice

• [x] I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[huong-li-nguyen]

Yay! 🥳 Yes, I also feel this was one of my most productive learning time investments 😄

I fully agree with you. It's also on my list to implement the hamburger menu if we go for the Bootstrap approach 👍

I was hoping you would say that 🤣 I will delete the yaml example with pleasure, haha. I do not want to keep it updated, mainly because we will revamp the demo dashboard again soon and archive this example.