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)

Browse source 
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
This commit is contained in:
Padreug 2026-09-10 06:09:10 +02:00
commit 9c0abfae1f
1 changed files with 7 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -72,8 +72,14 @@ const isNonApproved = computed(
</script> </script>
<template> <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 <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)" @click="emit('click', event)"
> >
<!-- Wash-out wrapper. The pending/rejected status badge below sits <!-- Wash-out wrapper. The pending/rejected status badge below sits