Bug: Table layout and date column are cut off on mobile screens on the Tournaments -> History page
Ninguém assumiu esta issue ainda.
Avaliação
- Dificuldade
- 2/5
- Tempo estimado
- 1-3 horas
- Facilidade para iniciantes
- 74/100
- Tipo de issue
- Bug
- Clareza
- Claramente especificada
- Status de atividade
- Ativa
- Stack de tecnologia
- css, javascript, react
- Domínio
- frontend
Direção de pesquisa
Comece pela página /tournaments e pelo componente da aba History; o payload não nomeia nenhum arquivo, então procure no frontend a tabela de histórico de torneios e sua coluna de data. Reproduza em 375px de largura e depois ajuste o contêiner da tabela para que as colunas caibam ou rolem horizontalmente. Pronto significa que o ano na coluna Date está totalmente visível e a tabela não é mais cortada em 375px.
Escrita pelo modelo de indexação a partir do texto da issue.
Descrição
Summary
Description
On mobile screen resolutions (e.g., 375px width), the tournaments table on the Tournaments -> History (/tournaments) page does not adapt properly to the screen width. As a result, the year in the "Date" column is cut off (e.g., 15 нояб. 20), and the right side of the table overflows/gets clipped.
Environment
- OS: Windows 11
- Browser: Yandex Browser v26.10.3.771 (64-bit)
- Screen resolution: 375x915 (DevTools Mobile Emulation)
- App Version: version : "f9a6e457d28d0bc64363ee1baa9e6d86"
Reproduction steps
Steps to reproduce
1. Open https://codebattle.hexlet.io/tournaments#list
2. Open Chrome DevTools (`F12`) and enable Mobile Device Emulation (`375px` width)
3. Switch to the **History** («История») tab
Expected result
The tournaments table adapts cleanly to mobile screen widths (or has a proper horizontal scroll inside the table container) so that dates and all columns are displayed completely without clipping.
Actual result
The right edge of the table is clipped: the year in the "Date" column is partially cut off (15 нояб. 20), and subsequent columns are hidden without proper responsive adaptation.
Browsers
Chrome
OS
Windows
- Linguagem predominante
- Elixir
- Estrelas
- 901
- Forks
- 241
- Merge médio
- 12h 48min
- PRs com merge (30d)
- 4
Preparar o ambiente
Inicia o contêiner de desenvolvimento do projeto no navegador, com a sua própria conta do GitHub.
- Inclui um Dockerfile ou arquivo Docker Compose
- Tem um modelo de pull request
- Ler o guia de contribuição
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Issues semelhantes
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 74/100
-
Broadcast API docs say to prepend realtime: to the topic, which breaks deliveryTalvez já em andamento @mandar1045 assumiu hoje. Aberta
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 80/100
Mantenedores costumam responder em até 1 dia
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 72/100
phoenixframework/phoenix_live_view#4509 ·
Mantenedores costumam responder em até 1 dia
-
camelToSnake and snakeCamelMapper() drop the underscore when a digit precedes a camelCase boundaryAberta
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 85/100
electric-sql/electric#4855 ·
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 62/100
bonfire-networks/bonfire-app#2538 ·
Mantenedores costumam responder em até 1 dia