[Bug] Fix Text Overflow in Long Event Titles on Mobile

[Aditya948351]

Description

When an event has an exceptionally long title, it breaks the layout of the Event Card on mobile screens, causing text to overflow outside the card boundaries.

Proposed Solution

1. Locate the EventCard component.
2. Apply Tailwind line-clamp utilities (line-clamp-2) or truncate to the title.
3. Ensure the layout remains intact on sm (mobile) breakpoints.

Expected Outcome

Responsive event cards that gracefully handle extremely long text.

[nishupr]

Hey @Aditya948351 !

I'd love to work on this bug fix. I've analyzed the issue and have a clear plan to resolve the text overflow in EventCard on mobile screens.

Root Cause

Long event titles in the EventCard component lack text overflow constraints, causing them to exceed card boundaries on sm breakpoints where horizontal space is limited.

Fix Plan

• Locate the EventCard component (likely in components/EventCard.tsx or similar)
• Apply line-clamp-2 on the title element to cap it at 2 lines with an ellipsis
• Add overflow-hidden and break-words to prevent horizontal overflow edge cases
• Verify min-w-0 is set on flex children so truncation works correctly inside flex containers
• Test across breakpoints - sm, md, and lg - to ensure layout stays intact at all screen sizes
• Check tooltip/accessibility - add a title attribute so full event name is visible on hover

Code Change (Rough Idea)

// Before
<h3 className="text-lg font-semibold">{event.title}</h3>

// After
<h3
  className="text-lg font-semibold line-clamp-2 overflow-hidden break-words min-w-0"
  title={event.title}
>
  {event.title}
</h3>

Could you please assign this issue to me?