fix(events): let the event card shrink below its truncated rows (min-w-0) #152

Merged

padreug merged 1 commit from fix/events-card-min-w-0 into dev

2026-09-10 04:10:17 +00:00

padreug commented

2026-09-10 04:09:28 +00:00

Owner

Problem

On phone widths an event card with a long address spills off the right edge of the screen (seen on the Oyez! build with "456 Rue Grand Rue de Bellissen, 09000 Bénac, France"). The address is clipped by the viewport rather than ellipsised.

Cause

EventList renders cards in a one-column CSS grid on mobile. A grid item defaults to min-width: auto, which resolves to its min-content width. The card's truncate rows (location, organizer) are white-space: nowrap, so their full text width counts toward that min-content, and the grid track grows past the viewport whenever an address doesn't fit on one line.

The demo doesn't show it only because its events have short addresses. Same code, different data.

Fix

min-w-0 on the Card root so the grid item can shrink and truncate actually truncates. overflow-hidden would also work but would clip the pending/rejected badge that intentionally hangs past the card's bottom edge. The compact hosting view is a column flexbox and was never affected.

One-line class change plus a comment explaining why the class is there.

🤖 Generated with Claude Code

https://claude.ai/code/session_01KVxfxB2sDFrdwnXrjhEp1b

## Problem On phone widths an event card with a long address spills off the right edge of the screen (seen on the Oyez! build with "456 Rue Grand Rue de Bellissen, 09000 Bénac, France"). The address is clipped by the viewport rather than ellipsised. ## Cause `EventList` renders cards in a one-column CSS grid on mobile. A grid item defaults to `min-width: auto`, which resolves to its min-content width. The card's `truncate` rows (location, organizer) are `white-space: nowrap`, so their full text width counts toward that min-content, and the grid track grows past the viewport whenever an address doesn't fit on one line. The demo doesn't show it only because its events have short addresses. Same code, different data. ## Fix `min-w-0` on the `Card` root so the grid item can shrink and `truncate` actually truncates. `overflow-hidden` would also work but would clip the pending/rejected badge that intentionally hangs past the card's bottom edge. The compact hosting view is a column flexbox and was never affected. One-line class change plus a comment explaining why the class is there. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01KVxfxB2sDFrdwnXrjhEp1b

padreug added 1 commit

2026-09-10 04:09:28 +00:00

fix(events): let the event card shrink below its truncated rows (min-w-0) 9c0abfae1f

On phone widths the event list is a one-column grid, and a grid item
defaults to min-width:auto (= min-content). The card's nowrap truncate
rows (location, organizer) push that min-content past the viewport for
any event with a long address, so the card spilled off screen and the
text was clipped by the window instead of ellipsised. min-w-0 on the
Card root lets the item shrink; overflow-hidden would have clipped the
pending/rejected badge that deliberately hangs past the bottom edge.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KVxfxB2sDFrdwnXrjhEp1b

padreug merged commit 9c0abfae1f into dev

2026-09-10 04:10:17 +00:00

padreug deleted branch fix/events-card-min-w-0

2026-09-10 04:10:17 +00:00