Bug: Test navigation overlaps test results on mobile screen
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 72/100
- Tipo de issue
- Error
- Claridad
- Bien especificado
- Estado de actividad
- Activo
- Stack tecnológico
- elixir, javascript, react
- Área
- accessibility, frontend
Línea de trabajo
Localiza primero en el frontend el panel de navegación de pruebas y los resultados de las pruebas seleccionadas; después, reproduce el problema en el área de visualización indicada, de 393 × 852 px, en Chrome DevTools. Comprueba cómo se desplaza la página al seleccionar una prueba mientras el panel de navegación está posicionado. La tarea estará terminada cuando los detalles de la prueba seleccionada permanezcan completamente visibles sin desplazarse manualmente.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Summary
On mobile screens, the test navigation panel overlaps the detailed test results after scrolling through the test list and selecting a test. This makes some information difficult to read without additional manual scrolling.
The issue was reproduced using iPhone 16 emulation (393 × 852 px) in Google Chrome DevTools.
Reproduction steps
1. Open https://codebattle.hexlet.io/ and log in.
2. Create a game against a bot.
3. Open Chrome DevTools and enable iPhone 16 device emulation (393 × 852 px).
4. Enter an incorrect solution and click Run.
5. Scroll down to the bottom of the test results list.
6. While at the bottom, click a test number in the navigation panel (e.g., test #9). The page automatically scrolls up to the selected test.
7. Observe that after the automatic scrolling, the test navigation panel overlaps the details of the selected test.
Expected result
The selected test details should be fully visible and readable without being covered by the test navigation panel.
Actual result
The test navigation panel overlaps the selected test details after scrolling. Some information is partially hidden, and additional manual scrolling is required to read it.
Browsers
Chrome
OS
Mac
- Lenguaje dominante
- Elixir
- Estrellas
- 894
- Forks
- 239
- Métricas de merge de PR
- Sin PR fusionados en 30 d
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
-
Remove agent guidance that restates what the code showsPosiblemente ocupada @zorn la tomó hace 1 día. Abiertodocumentation low-priority
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
Los mantenedores suelen responder en 1 día
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 66/100
intellij-elixir/intellij-elixir#4501 ·
Los mantenedores suelen responder en 1 día
-
Database text with `$` generates invalid `d2` outputPosiblemente ocupada @halostatue la tomó hace 1 día. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 67/100
-
bug(dashboard): gate card last-seen badge shows inventory-sync timestamp, not sweep observation timeAbierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 77/100
carverauto/serviceradar#5793 · 1 comentario ·
Los mantenedores suelen responder en 1 día