Bug: Table layout and date column are cut off on mobile screens on the Tournaments -> History page
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 74/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- css, javascript, react
- Domain
- frontend
Research direction
Start from the /tournaments page and the History tab component; the payload names no file, so search the frontend for the tournaments history table and its date column. Reproduce at 375px width, then adjust the table container so columns either fit or scroll horizontally. Done means the year in the Date column is fully visible and the table no longer clips at 375px.
Written by the indexing model from the issue text.
Description
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
- Dominant language
- Elixir
- Stars
- 901
- Forks
- 241
- Avg merge
- 12h 48m
- Merged PRs (30d)
- 4
Getting set up
Starts the project's dev container in your browser, under your own GitHub account.
- Ships a Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
-
Broadcast API docs say to prepend realtime: to the topic, which breaks deliveryPossibly taken @mandar1045 claimed this today. Open
Difficulty 1/5 Under an hour Newbie friendliness 80/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
phoenixframework/phoenix_live_view#4509 ·
Maintainers usually reply within 1 day
-
camelToSnake and snakeCamelMapper() drop the underscore when a digit precedes a camelCase boundaryOpen
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
electric-sql/electric#4855 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
bonfire-networks/bonfire-app#2538 ·
Maintainers usually reply within 1 day