[BUG] Image grid is sometimes messed up

[bt90]

Describe the bug

When scrolling quickly through the demo, sometimes the following glitch occurs:

Inspecting the HTML indicates that the timebucket divs are overlapping:

Tested with Firefox 108

To Reproduce Steps to reproduce the behavior:

1. Open https://demo.immich.app/
2. Quickly scroll down
3. Wait for the glitch to appear

System

• Server Version: 1.40.0 (Demo installation visited on 2023-01-02)

[alextran1502]

Confirm this has been the issue I want to track down since implementing the smart grid system but haven't been able to fine where the state not updating yet. Will look into it in detail in the near future.

[nicolopozzato]

Doesn't need to scroll, some times I just open the page and i get this galley. Immich server 1.50.1 with Chrome browser. A reload (ctrl+r) doesn't fix the issue, also (ctrl+shift+r) doesn't do anything to the grid... But reload a couple of times fix the issue...

[bt90]

Scrolling from bottom to top is almost impossible without causing severe distortion.

[alextran1502]

I notice you tested on Firefox, does Chrome do this on your side?

[bt90]

I still need to test it with Chrome, but at least the problem is reproducible. It always occurs in the same places in my timeline.

[alextran1502]

@bt90 I found the source of the current behavior on main it was due to a recent change of determine the viewport width to set the thumbnail size for mobile view. It cause the rerender of the timeline calculated bucket height

[alextran1502]

Resolved in #2666