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

未关闭 适合新手
#2,375 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
74/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
css, javascript, react
领域
frontend

调研方向

从 /tournaments 页面和 History 标签页组件开始;payload 没有指出任何文件,因此在前端搜索锦标赛历史表格及其日期列。在 375px 宽度下复现,然后调整表格容器,使各列要么放得下,要么可以横向滚动。完成的标准是 Date 列中的年份完整可见,并且表格在 375px 下不再被裁剪。

由索引模型根据 Issue 内容生成。

描述

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

主要语言
Elixir
星标
901
派生
241
平均合并
12 小时 48 分钟
30 天内合并 PR
4

环境准备

在 Codespaces 中打开

在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

相似的 Issue

更多 Elixir Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。