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

オープン 初心者向け
  • 何か問題がありますか？
#797 コメント 4 件 リアクション 0 件 担当者 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クラスを調べてください。viewport幅375pxでのはみ出しを再現し、ルームの詳細と「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分
マージ済み PR（30日）
12

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

AOSSIE-Org/DebateAI のほかの issue

AOSSIE-Org/DebateAI の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。