iPad OS - Broadcast - Analyse game view - usability issue with the analyse__tools element

[brianfcoleman]

Exact URL of where the bug happened

https://lichess.org/broadcast/magistral-villa-de-zahara-2024/round-6/9fl1UhqK/aewR8P0E

Steps to reproduce the bug

Either:

1. On an iPad with a (1024x768 CSS pixel size) navigate to a tournament broadcast
2. Choose a round and click on one of the games

Or:

1. On Firefox navigate to a tournament broadcast
2. Choose a round and click on one of the games
3. Open the developer tools and enable "Responsive Design Mode"
4. Set the size of the screen to 1024x768

What did you expect to happen?

• Prior to the new broadcast view being introduced, the <div class="analyse__tools"> element was the same height as the <div class="analyse__board"> element.

What happened instead?

• The new broadcast view lays things out differently than the old broadcast view, and as a result on iPad OS, the <div class="analyse__tools"> element is very difficult to interact with due to it's small size. Whilst this is not technically a bug, it does make it more difficult to make use of the features of the <div class="analyse__tools"> element.
• The space to the right of the <div class="analyse__board"> element is occupied by the <aside class=relay-tour__side> element, which is positioned atop the <div class="analyse__tools"> element, such that the <div class="analyse__tools"> element is half the height of the <div class="analyse__board"> element.
• This makes it very difficult to interact with the <div class="analyse__tools"> element due to it's small size.
• See the screenshots that I have attached in the "Additional information" field for more details.

Operating system

iPad OS 17.3.1

Browser and version (or alternate access method)

Safari

Additional information