Fix: Make model catalog buttons responsive on smaller screens #2358
Conversation
- Adjusted catalog.scss to use flex-wrap for button container - Ensures all action buttons are fully visible and usable on mobile devices - Improves overall mobile usability for AigisUK model page Signed-off-by: Sunny <[email protected]>
|
Yay, your first pull request! 👍 A contributor will be by to give feedback soon. In the meantime, please review the Newcomers' Guide and sure to join the community Slack. |
✅ Deploy Preview for mesheryio-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @bashSunny101, 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 resolves a significant mobile usability problem on the model page by ensuring that the action buttons are fully visible and accessible on smaller screens. By introducing a responsive design adjustment, the change enhances the user experience for mobile users interacting with the catalog, removing a previous interaction blocker. 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
|
![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 effectively resolves a significant mobile usability issue on the model catalog page by introducing flex-wrap: wrap. This ensures all action buttons are accessible on smaller screens, which is a great improvement. I have one suggestion regarding the ordering of CSS properties to enhance code maintainability.
|
Hi , Thank you! |
|
hi @bashSunny101, Thanks for contribution 🎉 |
Sure, will be there on time. |
|
Kindly merge this PR as it has got 3 approvals and also it is a part of hacktoberfest. |
Namanv0509
added
hacktoberfest
|
Thanks for your contribution to the Meshery community! 🎉
|
Summary
This PR fixes a major mobile usability issue on the model page where the three action buttons were being cut off on small screens.
Changes
catalog.scssto useflex-wrapon the button container for smaller screens.Impact
Hacktoberfest 2025
This contribution is part of Hacktoberfest 2025.
Fixes #2357