[UI/UX]: Improve Readability and Visual Balance Across Text, Components, and Buttons

[hunain053]

Before submitting

• I have searched existing issues to make sure this is not a duplicate.
• I have read the contribution guidelines.

Current UI/UX issue

Problem Statement

Hi @kunalverma2512 ,

I was exploring the CodeLens website and noticed that some UI elements feel a bit oversized. The text, component cards, and buttons take up more space than necessary, which makes certain sections harder to scan and affects the overall visual balance of the page.

On smaller screens, these large elements can make the layout feel crowded and require additional scrolling to view content.

Proposed improvement

Proposed Solution

• I'd love to help improve this by:

• Refining text sizes and typography hierarchy for better readability.

• Adjusting component card sizing and spacing to create a cleaner layout.

• Optimizing button sizes and padding for a more balanced appearance.

• Improving responsiveness so the UI feels consistent across desktop, tablet, and mobile devices.

Screenshots or mockups

No response

Responsive behavior considerations

Ensure text, component cards, and buttons adapt smoothly across mobile, tablet, and desktop devices, providing a consistent and user-friendly experience on all screen sizes.

Accessibility considerations

Improve readability through better typography hierarchy and spacing while maintaining accessible button sizes, contrast, and existing keyboard accessibility.

Additional implementation notes

The goal is not to redesign the website, but to enhance readability, spacing, and overall user experience while keeping the existing design and branding intact.

I'm a GSSoC 2026 contributor and would be happy to work on these improvements. Could you please assign this issue to me?

[rpoojaa06-git]

Hi @kunalverma2512 I would like to work on this issue.Please assign it to me (GSSoC'26).

[kunalverma2512]

@rpoojaa06-git this issue seems to be very confusing
Codelens has lots of pages and hence lots of components and subcomponents

I would say to leave this issue as I will going to refine it in upcoming days or would close it

To work on frontend , you can see existing issues or would prefer to firslty go through all pages and see all components redered and then try to make issue for specidic components fo specific page
You can open issue for small tasks like making it responsive as I see lot of sections or components inside pages seems to be good but when it comes to phone view then its very bad in terms of font size, spacing and much more

I would recommend to open new issues for frontend and make sure you open one issue at a time and get it merged successfully then again make issue and so on