The Lichess Streamer layout is broken

The Lichess Streamer layout from lichess.org/page/extend in Stylus broke within the last hour, and now shows a tiny board which gets bigger with every move:

When disabling Stylus, it returns to normal.

I tried reinstalling Stylus and the Lichess Stylus extension, and same problem.

I found a way which seems to improve the the situation,
and filed an update proposal here github.com/ornicar/userstyles/pull/12/files

What I found was that the userstyle uses some variables which seems to have changed names,
from using 2 dashes to 3 dashes:
--board-scale
--site-header-margin
--site-header-height
to
---board-scale
---site-header-margin
---site-header-height

Maybe there are more things which needs to be fixed and/or maybe it should be fixed in some other way,
or possibly this is _the_ way to fix it! :)

ok thanks

@tors42 said in #2:
> board-scale

Thanks for looking into this, and your solution makes it a lot better, but it's still a little buggy (the top clock overlaps the top bar now). I suspect this might have occurred when Lichess made that new top header change:

Changing "margin-top: -.5em;" to "margin-top: .2em;" seems to have fixed this now.

@media (min-width: 800px), (orientation: landscape) {
.round__app {
grid-template-columns: minmax(calc(70vmin * var(---board-scale)), calc(100vh * var(---board-scale) - calc(var(---site-header-height) + var(---site-header-margin)) - 3rem)) minmax(240px, 400px);
grid-template-rows: 30px 1fr auto min-content auto auto min-content auto 1fr 30px;
grid-template-areas: 'user-top .' 'board .' 'board mat-top' 'board expi-top' 'board moves' 'board controls' 'board expi-bot' 'board mat-bot' 'board .' 'user-bot .' 'kb-move .';
margin-top: .2em;
}

Cool cool!

I've updated the implementation proposal with your found value of ".2em" instead of "-.5em"
Thanks for the testing!

Update: It appears that also the bottom table that appears below the board when you have prior games against an opponent, is now gone from this layout as well (this one: )

And now the background is missing:

Removing:

body { background: #EDEBE9; }

Fixed the background issue for me. Still have the missing bottom table though.

Instead of removing body, you can replace body.dark with:
body[data-theme="dark"] { background: #161512; }

As for score table, it's hidden with the streamer layout.
That's what the styles under /* Remove underboard scoresheet */ do. Merely removing the styles there won't help, as you would also need to change the layout under .round