Start button on embedded puzzles scales poorly to mobile

[superuser-does]

I read this post and found the start buttons to be misplaced on my Motorola Razr 50 Ultra, unfolded, using Firefox for Android. See screenshot showing embedded puzles.

I am seeing similar results when changing it to iPhone SE using Chromium DevTools.
However, I'd be cautious in relying on DevTools as matching the resolution didn't emulate my Android view 1:1. The font that Android carries clearly affects size of the box in CSS.

You could decrease the horizontal padding on the button to fix this, unless you wanted to do it another way - as it may e.g. not meet your aesthetic goals.

The CSS controlling the widget can be found in this file:

lila/ui/bits/css/build/bits.lpv.scss

Lines 6 to 21 in df66483

	.lpv--gamebook {
	position: relative;
	}
	.lpv__gamebook {
	@extend %popup-shadow;
	z-index: $z-cg__board_overlay-100;
	position: absolute;
	top: 50%;
	@include inline-start(50%);
	transform: translate(-50%, -50%);
	display: block;
	padding: 1.5em 3em;
	text-decoration: none;
	font-size: 1.5em;
	white-space: normal;
	}

[DeeBi9]

Hi @superuser-does, I tested the misaligned START button issue using Chrome DevTools and found that decreasing the horizontal padding from 3em to 1.5em improved the alignment. While I wasn't able to test this directly on a Motorola Razr 50, the change appears to resolve the issue in the simulated environment.

Should I PR with this update or it requires more refinements or testing ?

Thanks

[superuser-does]

Absolutely - I mentioned that was a simple solution in my initial post.

Here's a visual for reference:

1.5em horizontal + vertical	1.5em horizontal, 3em vertical

NB: there are other languages with longer strings for START, but I think it will be fine from a quick check of the wordier languages.

It is just, clearly, not a square anymore.
So the question is if it meets @ornicar's aesthetic goals with the button. If this meets your needs Thibault, I'm happy to commit directly.