lichess-org/lila

Start button on embedded puzzles scales poorly to mobile

Chiusa

#16.748 aperta il 8 gen 2025

Vedi su GitHubGuida contributor
 (6 commenti) (0 reazioni) (0 assegnatari)Scala (2661 fork)batch import
good first issueno scala

Metriche repository

Star
 (18.196 stelle)
Metriche merge PR
 (Merge medio 2g 18h) (151 PR mergiate in 30 g)

Descrizione

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

Guida contributor

Direzione di ricerca
Il problema è un bug CSS nel ridimensionamento del pulsante di avvio del puzzle incorporato su dispositivi mobili. Il file da modificare è ui/bits/css/build/bits.lpv.scss (righe 6-21). Una soluzione suggerita è ridurre il padding orizzontale del pulsante. Per riprodurre il problema, testare su un dispositivo mobile o utilizzando l'emulazione di dispositivo di Chrome DevTools (ad esempio, iPhone SE). Assicurarsi che la modifica funzioni su diverse dimensioni di schermo mobile e browser. Non ci sono pull request collegate e il problema non è assegnato, quindi è disponibile per contributi.
Tech stack
cssscala
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
Meno di 1 ora
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Nuova
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
basic CSS knowledgemobile testing
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
90