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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#797 4 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@SYED-IRTEZA-HUSSAIN-RIZVI ya está trabajando en esto.

Desde el 12/11/2026.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
66/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, tailwindcss, typescript
Área
frontend, mobile

Línea de trabajo

Encuentra la página «Live Debate Rooms», a la que se accede mediante el botón «Play Online» de la página «Start Debate», e inspecciona la disposición de la lista de salas y las clases de Tailwind. Reproduce el desbordamiento en un viewport de 375px y luego ajusta el diseño adaptable para que los detalles de las salas y el botón «Join» quepan en el viewport, manteniendo usable el diseño de escritorio. Confirma que la página ya no requiere desplazamiento horizontal en móviles.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
TypeScript
Estrellas
107
Forks
263
Merge medio
7 h 54 min
PR fusionados (30 d)
12

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de AOSSIE-Org/DebateAI

Todos los issues de AOSSIE-Org/DebateAI

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.