Bug: Mobile View Navigation and Overflow Problems

adarshswaminath commented 2 months ago

Describe the bug and the steps to reproduce it

I recently visited the onchainkit.xyz documentation website, which is a great resource for React components and TypeScript utilities to help build top-tier onchain apps. However, I noticed some issues with the mobile view that affect the user experience

1.Navigation Bar Information Loss:

In the desktop view, the navigation bar includes the logo, search bar, Docs, Onchain App Examples, Frame Examples, and version information.
In the mobile view, the navigation bar only displays the logo, Docs, a search icon, and GitHub logo links.
This significant reduction in available navigation options can make it difficult for users to access important sections of the documentation on mobile devices.

2.Horizontal Overflow Issues:

On mobile devices, the page has horizontal overflow issues causing the content to extend beyond the visible screen width, resulting in a poor scrolling experience.

What's the expected behavior?

Screenshots:

Desktop View Navigation Bar
Mobile View Navigation Bar
Horizontal Overflow Issue

Note I am not sure if this is the right place to report these issues, but I hope this feedback is helpful. The documentation site is a valuable resource, and improving the mobile experience will make it even more accessible to users on the go.

Thank you for looking into these issues.

What version of the libraries are you using?

No response

kyhyco commented 1 month ago

Addressing this soon. Thanks for the report!

Zizzamia commented 3 weeks ago

Not my best CSS PR, but it should be fixed now.

coinbase / onchainkit