aiolabs/webapp
9
0
Fork 0
Code Issues 70 Pull requests Projects Releases Packages Wiki Activity Actions

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
Conversation 0 Commits 1 Files changed 1 +7 -1
1 changed files with 7 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 9c0abfae1f - Show all commits

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

Prev Next 
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 2026-09-10 06:09:10 +02:00
commit 9c0abfae1f

8
src/modules/events/components/EventCard.vue
View file

@ -72,8 +72,14 @@ const isNonApproved = computed(
</script>
<template>
<!-- `min-w-0`: the card is a grid item, and a grid item's default
`min-width: auto` resolves to its min-content width. The nowrap
`truncate` rows below (location, organizer) contribute their
full text width to that, so a long address would widen the
whole column past the viewport on phones. Letting the item
shrink is what makes `truncate` actually truncate. -->
<Card
class="relative cursor-pointer hover:shadow-lg transition-shadow duration-200"
class="relative min-w-0 cursor-pointer hover:shadow-lg transition-shadow duration-200"
@click="emit('click', event)"
>
<!-- Wash-out wrapper. The pending/rejected status badge below sits