Giters

lichess-org / lila

♞ lichess.org: the forever free, adless and open source chess server ♞

Home Page:https://lichess.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

diffen opened this issue · comments

commented

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;
 }
commented

I created a pull request for this fix: #15324

commented

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:
image

commented

Maybe use button-red for Skip this move.

image

commented

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

commented