Mobile Responsiveness Issue - Layout Not Optimized for Small Screens

[anuja12mishra]

Description:

The current repository listing page is not fully responsive on mobile devices. When viewed on smaller screens, the layout does not adjust appropriately, causing text and elements to overflow or become difficult to interact with. This significantly impacts the user experience for mobile users.

Steps to Reproduce:

• Open the repository page on a mobile device or use a mobile view in a desktop browser's developer tools (example-https://finder.usmans.me/repos/clojure).
• Observe that the content, grids, and text sizes do not adapt well to the narrow screen.
• The buttons and UI components may appear cramped or misaligned.

Expected Behavior:

• The page layout should adapt to various screen sizes using responsive utilities.
• Grid columns should collapse gracefully (e.g., 1 column on small screens, multiple columns on larger screens).
• Text sizes and spacing should be adjusted for readability.
• Buttons and interactive elements should be easily tappable on mobile.

Additional Context:

• The issue appears related to missing or incomplete Tailwind CSS responsive classes.
• Adding mobile-first styling and breakpoints such as sm:, md:, and lg: could improve this.
• Ensure the viewport meta tag is properly configured for mobile scaling.

Suggested Fix:

• Review and enhance the Tailwind CSS classes for responsiveness across components.
• Test across common device widths like 320px, 375px, 425px, etc.

Could you please assign this issue to me? I would like to work on improving the mobile responsiveness.
Thank you!

[max-programming]

Thanks for pointing this out @anuja12mishra
Go ahead with fixing this issue

[anuja12mishra]

Hello @max-programming,
I've resolved the issue in this commit: 9100ac5. Please review it and let me know if there's anything else that needs adjustment—I'm happy to make further improvements if required.
Thanks for your time and support!