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

Aperta Adatta ai principianti
  • Qualcosa non va?
#797 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@SYED-IRTEZA-HUSSAIN-RIZVI ci sta già lavorando.

Dal 12/11/2026.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
66/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, tailwindcss, typescript
Ambito
frontend, mobile

Direzione di ricerca

Trova la pagina «Live Debate Rooms», raggiungibile tramite il pulsante «Play Online» della pagina «Start Debate», e analizza il layout dell’elenco delle stanze e le classi Tailwind. Riproduci il problema di overflow con un viewport di 375px, quindi modifica il layout responsive affinché i dettagli delle stanze e il pulsante «Join» rientrino nel viewport, mantenendo utilizzabile il layout desktop. Conferma che la pagina non richiede più lo scorrimento orizzontale su mobile.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
TypeScript
Stelle
107
Fork
263
Merge medio
7h 54m
PR unite (30g)
12

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di AOSSIE-Org/DebateAI

Tutte le issue di AOSSIE-Org/DebateAI

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.