frontend
frontend copied to clipboard
SOS-RS
[BUG] Botão "atualizar" de atualizar abrigo aparece cortado para fora da tela - mobile
Descrição
O botão "atualizar" de atualizar abrigo aparece cortado para fora da tela. Quanto menor o dispositivo, menos se pode ler a palavra - e menos área para "clicar" nele disponível.
Problema encontrado
- Abra o site em mobile
- Escolha um abrigo
- Clique em "Editar abrigo"
- Verifique a posição do botão "Atualizar". Embora tenha um baita espaço em branco entre o conteúdo e o botão, ele está metade para fora da tela.
Prioridade
Média
Solução proposta
Botão fique todo localizado na área da página, inclusive com padding apropriado para ter um espaçamento entre ele e o rodapé.
Ambiente
Observado em Android. Sem iPhone para testar. Samsung S23 FE, Google Chrome Samsung J7 Prime 2, Google Chrome
Evidência
Samsung S23 FE
https://github.com/SOS-RS/frontend/assets/60936422/93f83985-ef92-4b61-aff0-b320b35ce771
Samsung J7 Prime 2
Acredito que o motivo para q isso aconteca seja pq estamos usando h-screen que traduz pra 100vh. Pra mobile 100vh não considera o tamanho da barra do navegador. Podemos trocar por 100dhv ou 100svh que vai impedir que isso aconteça.
https://caniuse.com/viewport-unit-variants
@larissapissurno no ambiente de Q.A nao mudou, mas ao realizar o teste em Producao verifiquei que foi modificado, mas fica um questionamento... Deixarei em Q.A ate ter uma resposta sobre.
Na parte de editar o abrigo deve ficar a pagina com parte de preenchimento e depois em branco, para em seguida arrastar com o dedo ou realizar a rolagem da tela/site para aparecer o atualizar? Sei que se for na seta do teclado virtual, ao menos na parte de editar o abrigo, nao se tem a necessidade de clicar no botao.
Vide Loom: https://www.loom.com/share/965129ec909241b98265176380b402fe?sid=88b3a8e6-3602-4749-9739-82d71a267cbe
