[BUG] City cards are cut off at corners on mobile view

[Ishita-190]

Describe the bug.

The venue/city cards in the ReactSlider component are not properly responsive on mobile devices. The cards have fixed dimensions that are too wide for phone screens, causing them to extend beyond the viewport and appear cut off at the corners.

Current Behavior:

• Cards use w-[300px] h-[400px] sm:w-[250px] sm:h-[350px]
• On phones, the 250px width is still too large for the viewport
• Cards extend beyond screen boundaries, getting cut at corners
• Slider treats most phones as desktop due to a very small mobile breakpoint

Expected behavior

• Cards should fit completely within mobile viewport
• Responsive sizing should adapt to different screen sizes
• No content should be cut off or overflow
• Slider should apply mobile layout on phone-sized screens

Files to Modify:

components/Venue/venue.tsx - Line 23 (className with card dimensions)

• Change w-[300px] h-[400px] sm:w-[250px] sm:h-[350px]
• To something like className="relative w-full max-w-[300px] h-[380px] sm:h-[400px] md:h-[420px] card-bg...
• Consider reducing margins/padding on mobile (m-3 to m-2, p-4 to p-3)

components/Slider/slider.tsx)

• Currently const isMobile = useMediaQuery({ maxWidth: '260px' });
• maybe change it to '640px' to expand the mobile breakpoint

Screenshots

How to Reproduce

1. Open the website locally
2. Access mobile view:

• Open browser DevTools (F12 or right-click → Inspect)
• Toggle device emulation mode (mobile icon in DevTools)
• OR: Resize browser window to mobile width (< 400px)

3.Test different mobile sizes:

• iPhone SE (375px width) - cards should be cut off
• Samsung Galaxy S8 - issue more severe

🖥️ Device Information [optional]

No response

👀 Have you checked for similar open issues?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[Khushboo1324]

Hi 👋, I was able to reproduce this issue on mobile view (tested on iPhone SE / 375px width).
The card overflows horizontally and gets cut off on the left side.

I’d be happy to work on a fix if no one is assigned yet. Please let me know if I can take this up. 🙂

[Ishita-190]

@Khushboo1324 Once the maintainers approve, you're welcome to take it up!

[Sreejesh06]

@Ishita-190 From my POV, instead of just swapping one fixed width for another, we could try using w-full max-w-[300px]. This way, the card keeps its design on larger screens but can shrink naturally for ultra-narrow devices like the Galaxy Fold without breaking the layout.
Also, I'd love to hear the mentor's thoughts on this approach or if there’s a specific layout preference we should keep in mind!

[Ishita-190]

@Sreejesh06 Thank you for the suggestion. After looking into it more, it seems the issue isn’t only the card size. The venue cards are inside the slider, and the slider wasn’t switching to mobile behavior because the breakpoint was set too narrowly. I think that's why phones were still getting desktop settings with fixed card widths, which caused the overflow and cutoff.
Using w-full max-w-[300px] with the corrected mobile breakpoint should allow the cards to scale properly across screen sizes.