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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#797 4 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@SYED-IRTEZA-HUSSAIN-RIZVI đang làm issue này rồi.

Từ ngày 12/11/2026.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
66/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, tailwindcss, typescript
Lĩnh vực
frontend, mobile

Hướng nghiên cứu

Tìm trang Live Debate Rooms, truy cập qua nút Play Online trên trang Start Debate, rồi kiểm tra bố cục danh sách phòng và các lớp Tailwind. Tái hiện lỗi tràn ở viewport 375px, sau đó điều chỉnh bố cục responsive để thông tin phòng và nút Join nằm gọn trong viewport, đồng thời giữ cho bố cục desktop vẫn dễ sử dụng. Xác nhận trang không còn cần cuộn ngang trên thiết bị di động.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
107
Fork
263
Merge trung bình
7 giờ 54 phút
Pull request đã merge (30 ngày)
12

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của AOSSIE-Org/DebateAI

Tất cả issue của AOSSIE-Org/DebateAI

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.