lichess-org/lila

Start button on embedded puzzles scales poorly to mobile

Fechada

#16.748 aberto em 8 de jan. de 2025

Ver no GitHubGuia do colaborador
 (6 comentários) (0 reação) (0 responsável)Scala (2.661 forks)batch import
good first issueno scala

Métricas do repositório

Stars
 (18.196 estrelas)
Métricas de merge de PR
 (Mesclagem média 2d 18h) (151 fundiu PRs em 30d)

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

Guia do colaborador

Direção de pesquisa
O problema é um bug de CSS no dimensionamento do botão de início do quebra cabeça incorporado em dispositivos móveis. O arquivo a ser modificado é ui/bits/css/build/bits.lpv.scss (linhas 6-21). Uma correção sugerida é diminuir o preenchimento horizontal do botão. Para reproduzir, teste em um dispositivo móvel ou usando a emulação de dispositivo do Chrome DevTools (por exemplo, iPhone SE). Certifique se de que a alteração funcione em diferentes tamanhos de tela móvel e navegadores. Não há pull requests vinculados e o problema não está atribuído, portanto está disponível para contribuição.
Pilha de tecnologia
cssscala
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Menos de 1 hora
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Recente
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
basic CSS knowledgemobile testing
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
90