Add Live tag to events, add placeholder for empty event carousels

[alexzhang1618]

Changes

• Closes carousel cards too big #181
  • Added a max-width to event cards so they fit inside mobile screens and have space for the next card
  • Still trying to figure out how to make the bottom of the cards stretch out if other cards in the carousel have started wrapping
    • switching eventcard to flex didn't work, block has weird image alignment that I couldn't figure out
• Adding a placeholder for event carousels with no events
• Adding a Live tag for events that are happening right now

Type of Change

• Bug Fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as
  expected)
• Logistics Change (A change to a README, description, or dev workflow setup like
  linting/formatting)
• Continuous Integration Change (Related to deployment steps or continuous integration
  workflows)
• Other: (Fill In)

Testing

I have tested that my changes fully resolve the linked issue ...

• locally on Desktop.
• on the live deployment preview on Desktop.
• on the live deployment preview on Mobile.
• I have added new Cypress tests that are passing.

Checklist

• I have performed a self-review of my own code.
• I have followed the style guidelines of this project.
• I have documented any new functions in /src/lib/* and commented hard to understand areas
  anywhere else.
• My changes produce no new warnings.

Screenshots

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
membership-portal-ui-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 29, 2024 5:09am

[SheepTester]

Since the badges can wrap now, can it get cut off on the pickup page

[alexzhang1618]

Since the badges can wrap now, can it get cut off on the pickup page

No since the change is only for event cards inside the EventCarousel

[SheepTester]

lgtm

since you're letting badges wrap now, would it make sense to allow the event names/locations to wrap too?

Still trying to figure out how to make the bottom of the cards stretch out if other cards in the carousel have started wrapping

• switching eventcard to flex didn't work, block has weird image alignment that I couldn't figure out

1. align-items: stretch on .slider
2. remove height: fit-content; from .container for the event card to allow it to stretch
3. the image is aligned weirdly because <button> elements vertically center their content by default. you could do display: flex; flex-direction: column; on the event card, then add width: 100%; to .info so the text doesn't overflow

[alexzhang1618]

since you're letting badges wrap now, would it make sense to allow the event names/locations to wrap too?

hmm maybe let's play around with this and figure out if we want it, for now I'll leave it out