[BUG]: Live Debate Rooms page overflows horizontally on mobile screens

未关闭 适合新手
  • 哪里不对？
#797 4 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@SYED-IRTEZA-HUSSAIN-RIZVI 已经在做这个了。

开始于 2026年11月12日。

评估

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

调研方向

找到通过 Start Debate 页面上的 Play Online 按钮进入的 Live Debate Rooms 页面，并检查房间列表布局和 Tailwind 类。在 375px viewport 下复现溢出，然后调整响应式布局，使房间详情和 Join 按钮都能容纳在 viewport 内，同时保持桌面布局易于使用。确认页面在移动设备上不再需要横向滚动。

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

描述

bug
Bug Description

[BUG]: Live Debate Rooms page overflows horizontally on mobile screens

Bug Description

The Browse Live Debate Rooms page is not properly responsive on mobile devices and smaller screen sizes.

When a user opens the DebateAI application on a mobile device and clicks the Play Online button on the Start Debate page, they are redirected to the Live Debate Rooms page.

On this page, the room listing section does not adjust correctly to the available viewport width. Some elements extend beyond the right edge of the screen, resulting in horizontal overflow. As a result, users may not be able to view all room information or access certain interactive elements comfortably.

This issue affects the mobile user experience, particularly when browsing available debate rooms and attempting to join a room.

Actual Behavior

  • The Live Debate Rooms content exceeds the available screen width on mobile devices.
  • The room listing layout does not adapt properly to narrower viewports.
  • Some room details and interface elements may extend beyond the visible screen.
  • Action buttons, including the Join button, may become partially hidden or difficult to access.
  • Users may need to scroll horizontally to view content that should ideally fit within the mobile layout.

Expected Behavior

The Live Debate Rooms page should provide a responsive and user-friendly experience across mobile, tablet, and desktop screen sizes.

  • All room information should be displayed within the available viewport width.
  • The room listing layout should adapt dynamically to smaller screen sizes.
  • Action buttons, including the Join button, should remain fully visible and accessible.
  • Text and other UI elements should wrap or resize appropriately instead of overflowing their containers.
  • Unnecessary horizontal scrolling should be eliminated.
  • The existing desktop layout and functionality should remain unaffected.

Suggested Areas to Investigate

The following areas may need investigation:

  • Fixed widths or minimum widths applied to the room listing container.
  • Flexbox or CSS Grid layouts that do not adapt to smaller screens.
  • Table columns or room information sections that exceed the available width.
  • Buttons and text elements that use fixed sizing or prevent text wrapping.
  • Missing responsive Tailwind CSS breakpoints.
  • Container padding and margins that reduce the usable mobile screen width.

These are possible causes to investigate, not confirmed root causes.

Suggested Solution

Consider implementing a mobile-first responsive layout for the Live Debate Rooms page.

Possible improvements include:

  • Use responsive widths such as w-full and max-w-full where appropriate.
  • Adjust grid and flex layouts using Tailwind responsive breakpoints.
  • Allow long text and room details to wrap within their containers.
  • Make action buttons responsive and accessible on smaller screens.
  • If the room listing uses a table, consider a mobile-friendly card layout or controlled horizontal scrolling within the table container.
  • Ensure the page does not introduce unintended horizontal overflow.

The solution should preserve the existing desktop experience while improving usability on mobile devices.

Steps to Reproduce

  1. Open the DebateAI application.
  2. Open Chrome DevTools and enable Toggle Device Toolbar, or access the application using a mobile device.
  3. Set the viewport width to approximately 375px (mobile screen size).
  4. Navigate to the Start Debate page.
  5. Click the Play Online button.
  6. Wait for the Browse Live Debate Rooms page to load.
  7. Observe the room listing section and its contents.
  8. Notice that some elements extend beyond the right boundary of the mobile viewport.
Logs and Screenshots

https://github.com/user-attachments/assets/8a58e8fd-a60c-4ef4-8d74-97bfde9568d4

Environment Details
  • OS: Windows 11
  • Browser: Google Chrome
  • Frontend: React + TypeScript
  • Styling: Tailwind CSS
  • Testing Mode: Chrome DevTools Responsive Mode
  • Viewport Width: 375px (Mobile)
  • Application: DebateAI
Impact

Medium - Feature works but has issues

Code of Conduct
  • I have joined the Discord server and will post updates there
  • I have searched existing issues to avoid duplicates
主要语言
TypeScript
星标
107
派生
263
平均合并
7 小时 54 分钟
30 天内合并 PR
12

环境准备

  • 提供 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

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

AOSSIE-Org/DebateAI 的其他 Issue

查看 AOSSIE-Org/DebateAI 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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