Bug: Table layout and date column are cut off on mobile screens on the Tournaments -> History page

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#2,375 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
74/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
css, javascript, react
Bereich
frontend

Rechercherichtung

Beginne bei der Seite /tournaments und der Komponente des History-Tabs; die Payload nennt keine Datei, also durchsuche das Frontend nach der Turnier-History-Tabelle und ihrer Datumsspalte. Reproduziere bei 375px Breite und passe dann den Container der Tabelle so an, dass die Spalten entweder passen oder horizontal scrollen. Fertig bedeutet, dass das Jahr in der Date-Spalte vollständig sichtbar ist und die Tabelle bei 375px nicht mehr abgeschnitten wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug
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.

image
Browsers

Chrome

OS

Windows

Vorherrschende Sprache
Elixir
Sterne
901
Forks
241
Ø Merge
12 Std. 48 Min.
Gemergte PRs (30 T.)
4

Entwicklungsumgebung

In Codespaces öffnen

Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Ähnliche Issues

Weitere Issues zu Elixir

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.