Bug: Table layout and date column are cut off on mobile screens on the Tournaments -> History page
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Idoneità per principianti
- 74/100
- Tipo di issue
- Bug
- Chiarezza
- Specificata chiaramente
- Stato di attività
- Attiva
- Stack tecnologico
- css, javascript, react
- Ambito
- frontend
Direzione di ricerca
Parti dalla pagina /tournaments e dal componente della scheda History; il payload non nomina alcun file, quindi cerca nel frontend la tabella della cronologia dei tornei e la sua colonna della data. Riproduci a 375px di larghezza, poi regola il contenitore della tabella in modo che le colonne entrino o scorrano orizzontalmente. Fatto significa che l'anno nella colonna Date è completamente visibile e la tabella non viene più tagliata a 375px.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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
- Lingua principale
- Elixir
- Stelle
- 901
- Fork
- 241
- Merge medio
- 12h 48m
- PR unite (30g)
- 4
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
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 74/100
-
Broadcast API docs say to prepend realtime: to the topic, which breaks deliveryForse già presa @mandar1045 l’ha presa oggi. Aperta
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 80/100
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
phoenixframework/phoenix_live_view#4509 ·
I maintainer di solito rispondono entro 1 giorno
-
camelToSnake and snakeCamelMapper() drop the underscore when a digit precedes a camelCase boundaryAperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 85/100
electric-sql/electric#4855 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 62/100
bonfire-networks/bonfire-app#2538 ·
I maintainer di solito rispondono entro 1 giorno