"View the solution" and "Skip this move" are too close together on mobile

[diffen]

I use my phone a lot to play (website, not the app). In the analysis/retro section the links for "View the solution" and "Skip this move" are too close so I end up clicking "Skip this move" instead of "View the solution".
The fix for this is quite simple. Add the following CSS in ui/analyse/css/_retro.scss inside the .retro-box block:

.choices > a {
    padding-bottom: 0.4em;
 }

[diffen]

I created a pull request for this fix: #15324

[Siderite]

I played around with it a bit (without being a UII designer), but if you add the "button" class to the anchors in choices and you use this:

body.mobile .analyse__tools:has(.retro-box) .analyse__moves {
  order: 2;
}

body.mobile .training-box .choices {
  margin-bottom:0;
}

body.mobile .training-box .choices a:nth-child(1) {
  margin-right:1em;
}

it looks like this:

[Siderite]

Maybe use button-red for Skip this move.

[diffen]

@Siderite You're right. Buttons look even better. Could you please make this change?

[Siderite]

I am not a developer for Lichess

…

On Sat, May 18, 2024, 20:37 Nikhilesh Jasuja ***@***.***> wrote: @Siderite <https://github.com/Siderite> You're right. Buttons look even better. Could you please make this change? — Reply to this email directly, view it on GitHub <#15322 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAB7TMJID4OMILS5HUIRRDLZC6GUDAVCNFSM6AAAAABH4PGOTGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJYHA4TMMJWGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>