From 9c0abfae1f7f3b7d46c70ea9bbd0bfd5d5392418 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 10 Sep 2026 06:09:10 +0200
Subject: [PATCH] fix(events): let the event card shrink below its truncated
 rows (min-w-0)

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
---
 src/modules/events/components/EventCard.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/modules/events/components/EventCard.vue b/src/modules/events/components/EventCard.vue
index 2604798..cbb4eae 100644
--- a/src/modules/events/components/EventCard.vue
+++ b/src/modules/events/components/EventCard.vue
@@ -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
-- 
2.55.0