Bug: Test navigation overlaps test results on mobile screen
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Idoneità per principianti
- 72/100
- Tipo di issue
- Bug
- Chiarezza
- Specificata chiaramente
- Stato di attività
- Attiva
- Stack tecnologico
- elixir, javascript, react
- Ambito
- accessibility, frontend
Direzione di ricerca
Per prima cosa, individua nel frontend il pannello di navigazione dei test e i risultati dei test selezionati, quindi riproduci il problema nell’area di visualizzazione indicata, di 393 × 852 px, in Chrome DevTools. Verifica come la selezione di un test faccia scorrere la pagina mentre il pannello di navigazione è posizionato. Il lavoro è concluso quando i dettagli del test selezionato restano completamente visibili senza scorrimento manuale.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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
- Lingua principale
- Elixir
- Stelle
- 894
- Fork
- 239
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Preparare l'ambiente
Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.
- Include un Dockerfile o un file Docker Compose
- Ha un modello di pull request
- Leggi la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Issue simili
-
Remove agent guidance that restates what the code showsForse già presa @zorn l’ha presa 1 giorno fa. Apertadocumentation low-priority
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 66/100
intellij-elixir/intellij-elixir#4501 ·
I maintainer di solito rispondono entro 1 giorno
-
Database text with `$` generates invalid `d2` outputForse già presa @halostatue l’ha presa 1 giorno fa. Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 67/100
-
bug(dashboard): gate card last-seen badge shows inventory-sync timestamp, not sweep observation timeAperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 77/100
carverauto/serviceradar#5793 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno