[Bug] Fix disappearance of charts after theme switch on mobile

[huong-li-nguyen]

Description

Closes https://github.com/mckinsey/vizro/issues/508

Issue seems to be caused by two factors:

• Changing from grid to flex layout when using mobile
• Charts not adhering to their entire width/height after theme switch

The current CSS fix forces the areas to always take on 100% height / width that's been allocated to them.

Screenshot

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.

[nadijagraca]

The changes look good to me, but I can't replicate the original issue.

Did you try to replicate it on mobile layout? I tried mobile layout in main, and charts were disappearing on theme switch.

[petar-qb]

Did you try to replicate it on mobile layout? I tried mobile layout in main, and charts were disappearing on theme switch.

Of course. I set the mobile dimensions exactly as they are in the original issue and ran the app from the main branch, but I couldn't replicate it. Anyway, if it works for you too, then let's merge this PR 😄.