AOSSIE-Org / AOSSIE-Org/DebateAI
Improve mobile UX for RoomBrowser by switching table to card layout on small screens
- 主要言語
- TypeScript
- スター
- 84
- フォーク
- 198
- 平均マージ
- 2日 19時間
- マージ済み PR（30日）
- 30
説明
### 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
);
})}
```
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
評価
この issue はまだ評価されていません。