Weird resizing issue on moving from live view to events gallery - v3.0.0-rc.1

Checklist:

• ✅ I updated to the latest version available
• ✅ I cleared the cache of my browser

Release with the issue: v2.0.1 v3.0.0-rc.1

Last working release (if known): v2.0.0

Browser and Operating System: Chrome on Android 12

Description of problem:

I’m using Chrome on Android 12, I’ve ‘installed’ the URL to appear as an app on my home screen as I prefer this to the official HA app (I can pull to refresh if any loading issues occur and most importantly, pinch to zoom to see camera’s better)

On v3.0.0-rc.1 I’m noticing some weird sizing issues on the right side of the screen when I switch between the live feed and the events gallery, video below to show what’s happening:

https://user-images.githubusercontent.com/57415184/152811469-e202475e-ae58-43b8-ba9f-3ed65be5c9a6.mov

Javascript errors shown in the web inspector (if applicable):

Additional information: This issue doesn’t exist in v2.0.0 but does in v2.0.1 and v3.0.0-rc.1 The issue doesn’t occur on official Android HA companion app.

[dermotduffy]

Made some progress here. This is incredibly obscure – I am 95% sure it’s the ripple animation on the button press for the gallery (not actually related to the gallery itself). If you move the menu to the left side, it probably won’t happen. The almost-invisible ripple animation is causing the content to ‘expand’ off to the right of the card, and because of the viewport settings in zoom-enable this causes the whole viewport to shift. It happens on the gallery because the gallery is the only button that has a hold action, which triggers this animation.

Ripping the animation out is probably the simplest fix.

[dermotduffy]

FYI: When I add zoom-enable, I can reproduce this! Will have to dig into what’s going on there, but reproducing it is ~essential for these weird layout problems…