fix: programs stylesheet inclusion logic and responsive issues on related pages #2323
Conversation
Signed-off-by: arctic-beep <182507466+arctic-beep@users.noreply.github.com>
Signed-off-by: arctic-beep <182507466+arctic-beep@users.noreply.github.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @arctic-beep, 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!
I've implemented fixes to ensure the program.css stylesheet loads correctly across all related program pages, resolving an issue where strict title matching prevented its application on certain pages. Additionally, I've addressed responsive design problems by preventing text overflow within specific elements on these program pages, enhancing their visual presentation across different screen sizes.
Highlights
- Stylesheet Inclusion Logic: I've updated the stylesheet inclusion logic in
_includes/header.htmlto usedowncase containsfor 'lfx' and 'google summer of code' inpage.titlechecks. This ensures thatprogram.cssis correctly applied to all relevant program pages, even those with more specific or varying titles like 'programs/lfx/2025'. - Responsive Overflow Issues: I've addressed responsive overflow issues on program pages by adding
overflow-wrap: break-word;toaandlielements incss/program.css. This prevents long text within these elements from overflowing their containers. - Project Title Styling: I've also added a new CSS rule for
project-titleincss/program.css, setting itsfont-sizeto1.7em. This change helps in resolving display issues related toh3.project-titleelements on program pages.
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 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 or fill out our survey 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.
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. ↩
❌ Deploy Preview for mesheryio-preview failed.
|
There was a problem hiding this comment.
Code Review
This pull request aims to fix the stylesheet inclusion for program pages and resolve some responsive layout issues. The changes to the stylesheet inclusion logic in _includes/header.html are a good step forward, but could be made more robust to handle future program pages. A critical issue was found in css/program.css where a CSS selector is incorrect, which will prevent the intended styles from being applied. I've provided suggestions to address these points.
Signed-off-by: arctic-beep <182507466+arctic-beep@users.noreply.github.com>
There was a problem hiding this comment.
@arctic-beep I think your code have issues
Screencast.from.2025-08-10.20-26-35.webm
|
@arctic-beep Text size should not be changed and unwanted underlines !!! |
Text size in responsive ( Mobile view ) had inconsistency !!! and
??? |
|
Thank you for your contribution! Add it as an agenda item to the meeting minutes, if you would :) |
Signed-off-by: arctic-beep <182507466+arctic-beep@users.noreply.github.com>
There was a problem hiding this comment.
@arctic-beep A pr should not fix 2 issues at a same time would be nice if you segregated both the issues in seperate prs
@vr-varad the program.css which is a dedicated stylesheet with common properties for lfx, GSoC, and similar program pages was not being included on lfx page due to bad logic. The PR here fixes that logic and now program.css is included on all program pages including LFX pages. It's important to note that the two changes(fixing stylesheet inclusion logic and responsive issues) was necessary to reflect the changes made, in deploy preview, and for a complete demonstration that is:
|
@Rajesh-Nagarajan-11 please take a look again. Most of the comments you made have been already fixed. The styles you're pointing out ( underline, and a little different styles between current LFX page on meshery.io and in the deploy preview) is due to the fact that program.css styles were never applied to lfx pages due to the bad inclusion logic ( which is fixed in this PR). For reference take a look at current GSoC/2025 page on meshery.io ( which does include the aforementioned stylesheet) and you should see the similarity between lfx/2025 page in this pr's deploy preview and gsoc/2025 page on live site. If you want to make suggestions to alter the existing styles themselves in program.css note that this pr isn't concerned with that and you should open an new issue with suggestions to improve the styling, which would be a good effort. This PR simply intends to fix the bad inclusion logic for the stylesheet so that it's uniformly applied to all programs pages ( which wasn't the case) and responsive line wrapping issue for Feel free to point out relevant issues you come across pertaining to changes made in this PR. |
Signed-off-by: arctic-beep <182507466+arctic-beep@users.noreply.github.com>
There was a problem hiding this comment.
@Rajesh-Nagarajan-11 @vr-varad the font size for heading h3 which is currently overflowing on lfx/2025 pages is already accounted for in this sheet on line number 45. If this stylesheet were applied to lfx pages, we wouldn't have that overflowing heading in the first place ( check GSoC/2025 pages for example).
The only fix needed to make GSoC and lfx page fully responsive in < 350px screen width is to ensure proper line wrapping for li and a which is included in this PR.
Take a look and feel free to share any suggestions/thoughts
|
@arctic-beep Preview Failed !!!! |
fixed ✅ |
|
@arctic-beep Still we have issues in Programs It was't while using media queries ; ) |
|
@Rajesh-Nagarajan-11 mention the screen width and height, if you would. |
|
@Rajesh-Nagarajan-11 make sure to not post overly large images in the review thread here. It makes it super difficult for others to follow on the conversation. |
|
@arctic-beep Sorry for larger images , i was screenshot in my mobile thats why it was longer |
|
@arctic-beep 375X650 |
|
@Rajesh-Nagarajan-11 can't seem to find the issue you've in your screenshot above. 
Please make sure you're visiting https://deploy-preview-2323--mesheryio-preview.netlify.app/programs/lfx/2025 |
|
@arctic-beep Touch the hamburger menu so that it will goes out of site |
I see @Rajesh-Nagarajan-11, it's an existing issue on the site. Here's the culprit: https://github.com/meshery/meshery.io/blob/master/css/program.css#L353 Again, something which would ideally be fixed in a separate pr as it's a existing style in the program sheet, but I'll go ahead and toss the change right now so that you can further test and share if there's any discrepancies |
Signed-off-by: arctic-beep <182507466+arctic-beep@users.noreply.github.com>
|
Thank you for your contribution! Add it as an agenda item to the meeting minutes, if you would :) |
Signed-off-by: arctic-beep <182507466+arctic-beep@users.noreply.github.com>
|
@arctic-beep Is this completed? |
|
Thank you for your contribution! Add it as an agenda item to the meeting minutes, if you would :) |
Thank you for this, @arctic-beep |
Description
Context: #2322 (review)
Notes for Reviewers
program.cssstylesheet now correctly loads on all related pages. Previously, a strict equality check prevented it from being applied to pages with varying title like: programs/lfx/2025 page.h3.project-title,aandlielements) on program pages for projects like GSoC and LFX have been fixed.Signed commits