lichess-org/lila

Start button on embedded puzzles scales poorly to mobile

Fermée

#16 748 ouverte le 8 janv. 2025

Voir sur GitHubGuide contributeur
 (6 commentaires) (0 réaction) (0 personne assignée)Scala (2 661 forks)batch import
good first issueno scala

Métriques du dépôt

Stars
 (18 196 étoiles)
Métriques de merge PR
 (Merge moyen 2j 18h) (151 PRs mergées en 30 j)

Description

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: https://github.com/lichess-org/lila/blob/df66483def8cc81e5fea9aa37023a09b7cd09874/ui/bits/css/build/bits.lpv.scss#L6-L21

Guide contributeur

Direction de recherche
Le problème est un bug CSS dans la mise à l'échelle du bouton de démarrage du puzzle intégré sur mobile. Le fichier à modifier est ui/bits/css/build/bits.lpv.scss (lignes 6-21). Une correction suggérée est de réduire le remplissage horizontal du bouton. Pour reproduire, testez sur un appareil mobile ou utilisez l'émulation d'appareil de Chrome DevTools (par exemple, iPhone SE). Assurez vous que la modification fonctionne sur différentes tailles d'écran mobile et navigateurs. Aucune pull request n'est liée et le problème n'est pas attribué, il est donc disponible pour contribution.
Stack technique
cssscala
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
Moins d'une heure
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Récente
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
basic CSS knowledgemobile testing
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
90