Bug: Test navigation overlaps test results on mobile screen
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 2/5
- Thời gian dự kiến
- 1-3 giờ
- Mức phù hợp với người mới
- 72/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức độ hoạt động
- Sôi nổi
- Công nghệ
- elixir, javascript, react
- Lĩnh vực
- accessibility, frontend
Hướng nghiên cứu
Trước tiên, hãy xác định bảng điều hướng kiểm thử và các kết quả kiểm thử được chọn trong frontend, sau đó tái hiện sự cố ở khung nhìn 393 × 852 px được báo cáo trong Chrome DevTools. Kiểm tra cách trang cuộn khi chọn một kiểm thử trong lúc bảng điều hướng được định vị. Hoàn tất khi thông tin chi tiết của kiểm thử được chọn luôn hiển thị đầy đủ mà không cần cuộn thủ công.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
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
- Ngôn ngữ chính
- Elixir
- Star
- 894
- Fork
- 239
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Chuẩn bị môi trường
Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.
- Có Dockerfile hoặc tệp Docker Compose
- Có mẫu pull request
- Đọc hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue tương tự
-
Remove agent guidance that restates what the code showsCó thể đã có người làm @zorn đã nhận 1 ngày trước. Đang mởdocumentation low-priority
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
Maintainer thường phản hồi trong vòng 1 ngày
-
bug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
Maintainer thường phản hồi trong vòng 1 ngày
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 66/100
intellij-elixir/intellij-elixir#4501 ·
Maintainer thường phản hồi trong vòng 1 ngày
-
Database text with `$` generates invalid `d2` outputCó thể đã có người làm @halostatue đã nhận 1 ngày trước. Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 67/100
-
bug(dashboard): gate card last-seen badge shows inventory-sync timestamp, not sweep observation timeĐang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 77/100
carverauto/serviceradar#5793 · 1 bình luận ·
Maintainer thường phản hồi trong vòng 1 ngày