Bug: Table layout and date column are cut off on mobile screens on the Tournaments -> History page
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 2/5
- Temps estimé
- 1-3 heures
- Accessibilité débutants
- 74/100
- Type d'issue
- Bug
- Clarté
- Clairement spécifiée
- Activité
- Active
- Stack technique
- css, javascript, react
- Domaine
- frontend
Piste de recherche
Pars de la page /tournaments et du composant de l'onglet History ; le payload ne nomme aucun fichier, donc cherche dans le frontend la table d'historique des tournois et sa colonne de date. Reproduis à 375px de largeur, puis ajuste le conteneur de la table pour que les colonnes tiennent ou défilent horizontalement. Terminé signifie que l'année dans la colonne Date est entièrement visible et que la table n'est plus tronquée à 375px.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
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
- Langage dominant
- Elixir
- Étoiles
- 901
- Forks
- 241
- Merge moyen
- 12 h 48 min
- PR mergées (30 j)
- 4
Préparer son environnement
Lance le conteneur de développement du projet dans votre navigateur, avec votre propre compte GitHub.
- Fournit un Dockerfile ou un fichier Docker Compose
- Propose un modèle de pull request
- Lire le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Issues similaires
-
Difficulté 2/5 1-3 heures Accessibilité débutants 74/100
-
Broadcast API docs say to prepend realtime: to the topic, which breaks deliveryPeut-être pris @mandar1045 l’a pris aujourd’hui. Ouverte
Difficulté 1/5 Moins d'une heure Accessibilité débutants 80/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 2/5 1-3 heures Accessibilité débutants 72/100
phoenixframework/phoenix_live_view#4509 ·
Les mainteneurs répondent en général sous 1 jour
-
camelToSnake and snakeCamelMapper() drop the underscore when a digit precedes a camelCase boundaryOuverte
Difficulté 2/5 1-3 heures Accessibilité débutants 85/100
electric-sql/electric#4855 ·
-
Difficulté 2/5 1-3 heures Accessibilité débutants 62/100
bonfire-networks/bonfire-app#2538 ·
Les mainteneurs répondent en général sous 1 jour