Broadcast game view: optimise move list space on 2 column layout

[kraktus]

Lots of wasted space on that could be used to show more moves, if the "game column" could shrink to fit depending on the number of games

[schlawg]

css grid breaks down when you need a dimensional constraint (board height) applied to multiple cells while providing flexible apportionment among those cells. the best way i've found to do this is place the constrained cells into their own flex or child grid container on a responsive basis with javascript. which is fine, unless you are against it for religious reasons.

for this issue, on page load javascript would move div.relay-tour__side and div.analyse__tools from the parent container into a single cell flex column constrained to cg board height. then we could minmax the round selector while having the move list expand to fill remaining space.

css alone allows page renders to start sooner. but a consequence is the grid rigidity under responsive layouts we struggle with here and in the lobby.

[schlawg]

it's easier to do this for broadcast/study where we build the dom clientside. but we could really use a magic bullet for grid issues when dom comes from the server like the lobby.

[kraktus]

I trust you if you say this is the best technical solution. Considering the page does not render without JS it's not a big deal here.

For server-side grid issues I guess some JS tooling that could be triggered by classes be worth it? I agree it's an issue across the website.

[schlawg]

Something like that. Maybe a client module (lobby) could specify in its package.json some typescript source that contains blocking layout code. ui/build could transpile that and insert the stringified javascript into a property of that module's manifest entry. then page/layout.scala could inject those statements inline to the body script. Wouldn't be useful often but could be very useful at least once.

[schlawg]

Not needed for this issue of course