Bug: Table layout and date column are cut off on mobile screens on the Tournaments -> History page
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 74/100
- Tipo de issue
- Error
- Claridad
- Bien especificado
- Estado de actividad
- Activo
- Stack tecnológico
- css, javascript, react
- Área
- frontend
Línea de trabajo
Empieza por la página /tournaments y el componente de la pestaña History; el payload no nombra ningún archivo, así que busca en el frontend la tabla de historial de torneos y su columna de fecha. Reproduce a 375px de ancho y luego ajusta el contenedor de la tabla para que las columnas quepan o se desplacen horizontalmente. Hecho significa que el año en la columna Date es totalmente visible y la tabla ya no se recorta a 375px.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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
- Lenguaje dominante
- Elixir
- Estrellas
- 901
- Forks
- 241
- Merge medio
- 12 h 48 min
- PR fusionados (30 d)
- 4
Preparar el entorno
Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.
- Incluye un Dockerfile o un archivo de Docker Compose
- Tiene una plantilla de pull request
- Leer la guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 74/100
-
Broadcast API docs say to prepend realtime: to the topic, which breaks deliveryPosiblemente ocupada @mandar1045 la tomó hoy. Abierto
Dificultad 1/5 Menos de una hora Aptitud para principiantes 80/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
phoenixframework/phoenix_live_view#4509 ·
Los mantenedores suelen responder en 1 día
-
camelToSnake and snakeCamelMapper() drop the underscore when a digit precedes a camelCase boundaryAbierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 85/100
electric-sql/electric#4855 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 62/100
bonfire-networks/bonfire-app#2538 ·
Los mantenedores suelen responder en 1 día