Bug: Test navigation overlaps test results on mobile screen
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Anfängerfreundlichkeit
- 72/100
- Issue-Typ
- Bug
- Klarheit
- Klar beschrieben
- Aktivitätsstatus
- Aktiv
- Tech-Stack
- elixir, javascript, react
- Bereich
- accessibility, frontend
Rechercherichtung
Suche zuerst im Frontend nach dem Test-Navigationsbereich und den ausgewählten Testergebnissen und reproduziere das Problem dann im gemeldeten Ansichtsfenster von 393 × 852 px in Chrome DevTools. Prüfe, wie die Auswahl eines Tests die Seite scrollt, während der Navigationsbereich positioniert ist. Fertig ist die Aufgabe, wenn die Details des ausgewählten Tests ohne manuelles Scrollen vollständig sichtbar bleiben.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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
- Vorherrschende Sprache
- Elixir
- Sterne
- 894
- Forks
- 239
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Entwicklungsumgebung
Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.
- Enthält ein Dockerfile oder eine Docker-Compose-Datei
- Hat eine Pull-Request-Vorlage
- Beitragsleitfaden lesen
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Ähnliche Issues
-
moderation phoenix/webdev
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
beyond-all-reason/teiserver#1694 ·
Maintainer antworten meist innerhalb von 1 Tag
-
Assigns view shows list and tuple elements in sorted order instead of their real orderEvtl. vergeben @RaphaelFakhri hat das vor 1 Tag übernommen. Offen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
software-mansion/live-debugger#1011 ·
-
bug
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
edgehog-device-manager/edgehog#1711 · 2 Kommentare ·
Maintainer antworten meist innerhalb von 1 Tag
-
bug
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 66/100
intellij-elixir/intellij-elixir#4501 ·
Maintainer antworten meist innerhalb von 1 Tag