Changing insights filters breaks view on chrome mobile

[allanjoseph98]

Exact URL of where the bug happened

https://lichess.org/insights/thibault/acpl/variant/

Steps to reproduce the bug

1. Open the url on chrome (either chrome mobile or chrome dev tools emulate)
2. Filters -> Add/change a filter

What did you expect to happen?

Mobile view to persist

What happened instead?

Mobile view breaks and resets to desktop views

Operating system

Any

Browser and version (or alternate access method)

Chrome 121

Additional information

Can't reproduce this bug on Firefox.

[trevorbayless]

I figured I'd document some findings I have on this issue. It appears the issue is in ui/insight/src/view.ts when window.innerWidth is used (specifically with Chrome). Chrome is not consistently updating the window.innerWidth (and .innerHeight) which are used to drive the layout. In researching, I've come across various posts on this and the consensus (whether it's right or not) is to use window.setTimeout to delay reading the window values, but I have been unsuccessful in this approach.

To test, I added the following logging statement to the containerStyle function: console.log("window.innerWidth = " + window.innerWidth)

Test results in Chrome

https://github.com/lichess-org/lila/assets/3620552/d0172ba8-4425-4e6e-9abc-ebb84ae15696

Test results in Firefox

https://github.com/lichess-org/lila/assets/3620552/b9fc060b-db5b-4077-b50b-8490f0ec1029

[Carbrex]

I figured I'd document some findings I have on this issue. It appears the issue is in ui/insight/src/view.ts when window.innerWidth is used (specifically with Chrome). Chrome is not consistently updating the window.innerWidth (and .innerHeight) which are used to drive the layout. In researching, I've come across various posts on this and the consensus (whether it's right or not) is to use window.setTimeout to delay reading the window values, but I have been unsuccessful in this approach.

To test, I added the following logging statement to the containerStyle function: console.log("window.innerWidth = " + window.innerWidth)

I would like to add my finding too. When you click on the insights tab and there arent any insights to show the window.innerwidth magically increases only when the screen width is small <500px.

[schlawg]

The whole thing could use a mobile redesign to be honest. I may have tried to shoehorn too much of the desktop code into mobile there.

[Carbrex]

It works as expected now from chrome v122, I think. Not sure if there was a code change related to this or maybe Chrome fixed what was causing this issue(but it worked fine on firefox). I think the latter one as I tried on chromium v121 and it crashes now when I change the filter when I emulate mobile screen.