Page and board shift with lots of spectators

[Arcticpenguins]

My apologies if you are all already on this, but I've noticed at least 3 forum posts confused about what I believe is the same issue over the last few weeks (1, 2, 3).

Issue: When a large number of spectators suddenly join a game, the extra text can overflow the height of the browser window causing a scrollbar to appear on the right and shift the board a few pixels to the left. When they leave (for example they are no longer on Lichess TV), it shifts back. This can happen frequently in one game if the text is just barely overflowing the page, see below.

Possible solution: The spectator box could have fixed dimensions (say 5 lines?) so when there are lots of spectators it has its own scrollbar just like the move list. It never changes the height of the screen because it is always 5 lines high whether there are 0 spectators or 200.

[Unihedro]

5 lines is not enough for when you're sizing your browser like that (where it can only display four lines). Unfortunately, the conventional browser implementation of the window width excludes space consumed for scroll bars, so some websites simply make the scrollbar as thin as two pixels to avoid the trouble caused by content overflow.

Although, it's probably the best to do (limiting spectator box maximum height).

[Arcticpenguins]

I was thinking you could surround the spectators list with a spectator box (fixed dimensions, roughly 5 lines high) like the one used for the chat window. So if I size my browser to fit 4 lines of spectators (like in the gif) and I only have 4 lines of spectators the page will still overflow due to the bottom border of the spectator box. Playing with a short window that requires a scrollbar is fine as long as it doesn't change mid-game.

[Unihedro]

aha.

[Arcticpenguins]

This CSS seems to accomplish what I was thinking: https://userstyles.org/styles/121112/trap-spectators-in-a-box

Where it is now, you have to show an empty spectator box even when there are no spectators just to be absolutely certain that the page height never changes during a game. However, if you move the spectators or shrink the chat so the sudden appearance of a 5 line high box can never add to the height of the page then you wouldn't need to force the empty box to be visible.

[Unihedro]

As an idea or a candidate solution, html, body { overflow: hidden; height: 100% } will completely disable the scrollbar.

[Arcticpenguins]

I experimented with something similar that only affects the game and Lichess TV pages: https://userstyles.org/styles/120935/hide-scrollbar-during-games-on-lichess-org

It's not ideal though; sometimes I want to scroll down to read the head to head records or other things below the game board. It would solve the problem, but it might be better if the page height never changed during a game.

[ddugovic]

Personally I'd prefer if the menu bar (top) and the left panels were separate frames from the lower-right "quadrant" (all content other than the menu bar and left panels). But I tend to prefer functionality over elegance! :-)