AOSSIE-Org / AOSSIE-Org/DebateAI
Improve mobile UX for RoomBrowser by switching table to card layout on small screens
- Vorherrschende Sprache
- TypeScript
- Sterne
- 84
- Forks
- 198
- Ø Merge
- 2 T. 19 Std.
- Gemergte PRs (30 T.)
- 30
Beschreibung
### 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
);
})}
```
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Bewertung
Dieses Issue wurde noch nicht bewertet.