Clickable prototype. Nothing is saved, nothing is real.
390 × 780 — phone
desktop — drag the bottom-right corner to resize
What differs between the two
Navigation. Seven destinations is past what a phone tab bar holds,
so the phone gets a drawer behind the menu button. Desktop shows the same list as a
persistent sidebar — hiding navigation where there is room to show it
costs discovery. Same destinations either way.
Filtering. Phone gets one toggle, “show completed and cancelled”.
Desktop gets multi-select status, venue, relative date range, and sort. Same data and
same results — only the controls differ.
Primary actions go full width on phone, inline on desktop.
The auth card is the same component at both sizes — it is
max-inline-size, so it simply fills a narrow screen.
Try this
Add sample events (top bar) seeds four events across every status,
so the filters and the default view do something visible.
Note the phone shows 2 of 4 and desktop 4 of 4 —
the phone hides completed and cancelled by default.
Event times show the venue’s zone, with yours alongside only when
it differs.
Still unanswered
The empty workspace is the highest-churn screen. Does “No events
yet” give you enough to act on?
The Free limit appears on a second event. Helpful, or nagging?
Request to join ends in a waiting state that grants nothing. Clear,
or a dead end?