AOSSIE-Org / AOSSIE-Org/DebateAI
Improve mobile UX for RoomBrowser by switching table to card layout on small screens
- Dominant language
- TypeScript
- Stars
- 84
- Forks
- 198
- Avg merge
- 2d 19h
- Merged PRs (30d)
- 30
Description
### Description
The current **RoomBrowser** component renders a table for all screen sizes.
On mobile devices, this results in horizontal scrolling due to long Room IDs and multiple columns, which negatively impacts usability.
Although overflow-x-auto prevents layout breaking, horizontal scrolling tables are not a good mobile UX pattern.
### Current Behavior
RoomBrowser.tsx always renders a table
**On mobile:**
> Requires horizontal scrolling
> Action buttons are cramped
> Room IDs cause layout overflow
### Expected Behavior :
- Desktop: keep the existing table layout
- Mobile: display rooms as stacked cards (vertical layout)
- No change in data, logic, or API behavior
### Proposed Solution
- Render card-based layout on mobile (sm:hidden)
- Render table layout on desktop (hidden sm:block)
- Reuse existing handlers (handleJoinMatch, handleViewDebate)
- No backend or API changes
### Files to be Updated
```
src/components/RoomBrowser.tsx
```
### Implementation Plan (Simple & Safe)
1. Keep existing table (desktop only)
Wrap your existing table JSX like this:
```
{/* existing table exactly as-is */}
```
2.Add a mobile card layout (new JSX)
```
{rooms.map((room) => {
const memberCount = room.participants?.length || 0;
const avgElo = getAverageElo(room.participants);
return (
Room ID
{room.id}
Type
{room.type.toUpperCase()}
Members
{memberCount > 0 ? memberCount : 'Empty'}
Avg Elo
{memberCount > 0 ? avgElo : '--'}
handleJoinMatch(room.id)}
className="flex-1 bg-primary text-primary-foreground py-2 rounded"
>
Join
handleViewDebate(room.id)}
className="flex-1 bg-secondary text-secondary-foreground py-2 rounded"
>
View
);
})}
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with src/components/RoomBrowser.tsx and review the existing table, handlers, and room data rendering. Keep the table for desktop, add the specified stacked card layout for small screens, and verify that room data and the Join and View actions remain unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100