Bug: Broken UI in user page

[devAlisha]

Description

When resizing the screen on the User page, the carousel images for Events Attending overlap, leading to a visual issue that negatively impacts the user experience. This issue requires attention and resolution.

Steps to Reproduce

1. Visit the User page by navigating to /User/:userId.
2. Ensure the initial screen size is set to 1440px.
3. Gradually reduce the screen size to a smaller resolution.
4. Observe the carousel images and note the overlap.

Proposed Solution

Using window.innerWidth in combination with the resize event listener and React state

Screenshots

Browser 🥦

Google Chrome

Checklist ✅

• I checked and didn't find similar issue
• I have read the Contributing Guidelines
• I am willing to work on this issue (blank for no).

[github-actions]

Hello @devAlisha, thank you for raising the issue.

Currently, the issue is marked as https://github.com/MilanCommunity/Milan/labels/status%3A%20todo%20%E2%8F%B3 so please wait until the maintainers/owner review it and provide you with feedback/suggestions to proceed further.

Feel free to reach out to Tamal on Twitter, or drop a mail at [email protected] if you think that this issue is of critical priority.

Give us a ⭐ to show some support
Happy OpenSource 🚀

[devAlisha]

I'm willing to work on this issue
Please assign this to me

[chinmayborade]

I am interested to work on this

[tamalCodes]

Hi @devAlisha , as you said about the overlapping part, how about we do a slider because if you look at this line here, you will notice that the data is just fixed which also causes responsiveness issue sometimes.

A club might also do 10-15 events, so I assume a slider would be better.
If you look at the mentor's section, this would be a great example of what i want. You can start working on it too.

📑 Checklist in case you missed something

• Local project setup, .env for the frontend.
• Contributing guidelines to be followed.

Please maintain structure, use conventional pull request titles, and avoid spam to avoid closure or bans.

[devAlisha]

In the code we are already using a slider just like the mentor section
when the screen size is <1200 then it is supposed to just show 1 card in that swiper but that is not working because we should use useEffect and useState along with event listener
Furthur, to improve the performance we can use window.matchMedia as it provides better performance
Please, share your views on this

[devAlisha]

There is a better, easier solution
swiper library that we are using also provides the breakpoints attribute

We can simply use this in both the pages (userProfile and clubProfile)
Should I implement this @tamalCodes ?

[devAlisha]

I've raised the PR please do review @tamalCodes
Also, I've added pagination attribute from the swiper library because at the first glance it looked like event were cards instead of a slider

[Salonijain2210]

Please allow me the opportunity to resolve this issue at hand

[github-actions]

Hi @tamalCodes, We just made a new organization, and have sent you an invite. Welcome to the community 🎉

Don't forget after accepting to make it public so it appears on your GitHub profile for everyone else to see. You can do this by finding your name in the GitHub organisation list and change the dropdown to public https://github.com/orgs/MilanCommunity/people