Fix mobile navigation menu text truncation #2526
Conversation
Signed-off-by: Bhumika Garg <[email protected]>
✅ Deploy Preview for mesheryio-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @Bhumikagarggg, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses a user experience issue on mobile devices where navigation menu labels were being clipped due to their length. The change introduces a CSS-only solution to ensure that these labels are displayed on a single line, with any overflow gracefully handled by an ellipsis, thereby enhancing readability and maintaining a clean interface on smaller screens without impacting the desktop layout. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Hello maintainer @saurabhraghuvanshii ! |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request addresses a text truncation issue in the mobile navigation menu by removing width: 100% from the .nav-list style. While this change likely fixes the visual problem, my review focuses on a potential maintainability issue. The implementation for the ellipsis truncation is not explicit in the provided change, making the code's intent less clear for future developers. I've left a comment suggesting how to make the fix more robust and self-documenting.
Rajesh-Nagarajan-11
left a comment
Rajesh-Nagarajan-11
left a comment
There was a problem hiding this comment.
Please have a look at Gemini’s review.
Signed-off-by: Bhumika Garg <[email protected]>
|
@Rajesh-Nagarajan-11 I’ve updated the mobile navigation styles to explicitly define the truncation behavior using white-space, overflow, and text-overflow, making the intent clearer and improving maintainability. |
|
@Bhumikagarggg Thank you for your contribution! Let's discuss this during the website call tomorrow at 6:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
3 participants
Description
This PR fixes #2525 by resolving an issue where long navigation menu labels were getting clipped in the mobile view.
The fix ensures that mobile navigation items remain single-line and display an ellipsis (
…) when the text exceeds the available width, improving readability and user experience on smaller screens.Notes for Reviewers
Screenshot
Signed commits