fix: buttons overflow on home page #2157
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello @M-DEV-1, 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!
Summary of Changes
This pull request addresses issue #2156, which involves fixing button overflow on the home page for smaller screens. The primary change involves adding a media query in _sass/forms.scss to adjust the width and alignment of the .button-para class when the screen width is 480px or less. This ensures that the buttons display correctly on mobile devices.
Highlights
- Responsive Design: The PR implements a media query to improve the responsiveness of buttons on smaller screens.
- CSS Adjustment: The PR modifies the width and alignment of the
.button-paraclass for mobile devices.
Changelog
- _sass/forms.scss
- Added a media query for screens with a maximum width of 480px.
- Within the media query, the width of the
.button-paraclass is set to 100%. - Within the media query, the display property of the
.button-paraclass is set to flex. - Within the media query, the justify-content property of the
.button-paraclass is set to flex-start.
Using Gemini Code Assist
The 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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and 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 to provide feedback.
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.
On screens so small,
Buttons would often fall,
Now aligned with grace,
Taking their right place,
A mobile fix for all.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This PR addresses the issue of buttons overflowing on the home page for smaller screens. The provided screenshots clearly demonstrate the problem and the effectiveness of the solution. The use of a media query to adjust the width and alignment of the buttons is a good approach.
Merge Readiness
The code change appears to effectively address the reported issue. Given the straightforward nature of the fix and the visual confirmation provided, the PR seems ready for merging. However, it's always a good practice to test the changes on actual devices or emulators with different screen sizes to ensure the fix works as expected. I am unable to directly approve this pull request, and recommend that others review and approve this code before merging.
✅ Deploy Preview for mesheryio-preview ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -67,6 +67,14 @@ | |||
| } | |||
| } | |||
|
|
|||
| @media (max-width: 480px) { | |||
There was a problem hiding this comment.
the .button-para always has its width set to fit-content, I am not sure how setting the width to 100% helps here
There was a problem hiding this comment.
since the button was breaking in mobile view, by forcing the element to take maximum-width we can prevent the breaking onto newline.
There was a problem hiding this comment.
i think it works, but the issue is difficult to reproduce on desktops, so there might be a better approach to solving this too
_sass/forms.scss
Outdated
| display: flex; | ||
| justify-content: flex-start; |
There was a problem hiding this comment.
.button-para always contains just one element: an anchor tag, which naturally aligns to the left, I am not sure how setting display: flex and justify content helps here
Signed-off-by: codered-lgtm <[email protected]>
|
To @vishalvivekm's point, @M-DEV-1 Let's see ( the background-color of .button-para div is set to orange):
|
|
@M-DEV-1 Add it as an agenda item to the meeting minutes, if you would :) |
|
@M-DEV-1 Are we closing this out? |
|
@vishalvivekm yes |
Description
This PR fixes #2156
Notes for Reviewers
before:
after:
width: 375px
Signed commits