lichess-org/lila

Start button on embedded puzzles scales poorly to mobile

Geschlossen

#16.748 geöffnet am 08.01.2025

Auf GitHub ansehenContributor Guide
 (6 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)Scala (2.661 Forks)batch import
good first issueno scala

Repository-Metriken

Stars
 (18.196 Sterne)
PR-Merge-Metriken
 (Durchschn. Merge 2T 18h) (151 gemergte PRs in 30 T)

Beschreibung

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

Contributor Guide

Research-Richtung
Das Problem ist ein CSS Fehler bei der Skalierung der eingebetteten Puzzle Start Schaltfläche auf Mobilgeräten. Die zu ändernde Datei ist ui/bits/css/build/bits.lpv.scss (Zeilen 6-21). Ein vorgeschlagener Fix ist die Verringerung des horizontalen Innenabstands der Schaltfläche. Zur Reproduktion auf einem Mobilgerät testen oder die Geräteemulation von Chrome DevTools verwenden (z. B. iPhone SE). Sicherstellen, dass die Änderung auf verschiedenen Mobilbildschirmgrößen und Browsern funktioniert. Es sind keine Pull Requests verknüpft und das Issue ist nicht zugewiesen, daher steht es für Beiträge zur Verfügung.
Tech Stack
cssscala
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
Unter 1 Stunde
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Frisch
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
basic CSS knowledgemobile testing
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
90