Mobile Responsiveness Fix

[notsoocool]

Description:

The CodeCache website needs improvements in its mobile responsiveness. Certain components and pages do not adapt well to smaller screens, which leads to elements being misaligned or overflowing the viewport. The following pages require attention:

1. Home/All Snippets Page:

   • Snippet cards are not stacking properly on smaller screens.
   • Overflowing content or clipped text in certain areas.

2. Add Snippet Page:

   • Form elements are not resizing correctly on mobile, leading to horizontal scrolling.

3. Profile Page:

   • User submissions, bookmarks, and ratings need better layout adjustments for mobile.

4. Admin Panel:

   • Buttons and tables should be optimized for touch interactions.

5. Notification Page:

   • Newly implemented notifications panel needs to be checked for mobile responsiveness.

Expected Behavior:

All pages should be fully responsive:

• Elements should stack vertically or resize appropriately.
• No horizontal scrolling or clipped content.
• Touch-friendly buttons and controls.

Steps to Reproduce:

1. Open the website on a mobile device or resize the browser window to a small screen size.
2. Navigate through the various pages to observe responsiveness issues.

Suggested Fixes:

• Implement media queries to ensure proper scaling.
• Use relative units like %, em, and rem where appropriate.
• Consider CSS Grid/Flexbox for better layout adjustments on small screens.

[inkerton]

Assign It to me @notsoocool

[STSonyThomas]

Hey can I work on this?

[notsoocool]

@STSonyThomas kindly get only one issue assigned first. Take some time, think on what issue you wanna work, and then i will assign you on that issue

[STSonyThomas]

Hey I am done with the backend of the chatbot for the prev issue. Waiting on Ananya to add the front-end. Should I still wait on getting that issue being merged before attempting this issue?

[STSonyThomas]

If #86 is not complete by tomorrow afternoon I'll complete that. But this would only take me like 2 hours to get done with hence I would love to be able to multi task.

[coderKrysio]

Hey @notsoocool, Can I work on this issue?

I have gone through the underlying issue for the first three pages that you have mentioned

Proposed Solution:

• page 1: remove the sidebar and style the cards for mobile width (or the sidebar can be put as a scrollable filter bar above all the cards, acting as a fixed filter navbar)
• page 2: remove the tab functionality for the mobile width and introduce simple scrollable section with cards for ease, as user will be able to navigate well
• page 3: fix the styling bug for the form

these changes are just suggestions, you can improvise it further as per your liking also if possible can we do this in two pr because we are introducing responsiveness

[notsoocool]

@STSonyThomas let @coderKrysio handle this issue for day or two, till then you can look for other issues as well, i am ready to assign multiple people to single issues.

[coderKrysio]

hey @notsoocool then can i distribute this in two pr? and work on the first three pages the next two can be taken by @STSonyThomas

[notsoocool]

@coderKrysio perfect seams fine to me just contact @STSonyThomas to distribute the work load and you can go ahead.