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 ✅

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

[github-actions[bot]]

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 tamalcodes@gmail.com 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[bot]]

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