Fix: Correct UI layout on meshery.io/programs page

[dhimanAbhi]

Description
This PR resolves multiple UI inconsistencies on the Programs page, improving responsiveness and alignment.

1. Fixed Card Layout Issue – Program cards now wrap into multiple rows instead of appearing in a single row.
2. Fixed Hover Text Overflow – Prevented text overflow when hovering over program cards.
3. Fixed Section Alignment Issue – Properly aligned the list items in the Community

This PR fixes #2105

Screenshots

Programs._.Meshery.-.Brave.2025-04-02.16-19-32.mp4

Notes for Reviewers

Signed commits

• Yes, I signed my commits.

[gemini-code-assist]

Hello @dhimanAbhi, I'm Gemini Code Assist¹! 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 several UI layout issues on the Programs page, aiming to improve responsiveness and alignment. The changes include fixing the card layout to wrap into multiple rows, preventing text overflow on hover, and properly aligning list items in the Community section. The changes touch both the HTML template and CSS files to achieve the desired layout and styling adjustments.

Highlights

• Card Layout Fix: The program cards now wrap into multiple rows instead of appearing in a single row, improving responsiveness on different screen sizes. This was achieved by modifying the _includes/program-lists.html file.
• Hover Text Overflow Prevention: Text overflow when hovering over program cards has been prevented, enhancing the user experience. This was achieved by modifying the _includes/program-lists.html file.
• Section Alignment Fix: The list items in the Community section are now properly aligned, resolving a visual inconsistency. This was achieved by modifying the css/program.css file.
• Container Width Adjustment: The maximum width of the text container has been increased to 1140px to better accommodate content. This was achieved by modifying the _sass/layout.scss file.

Changelog

• _includes/program-lists.html
  • Added display: flex, align-items: center, justify-content: center, and height: 100% to .card .info to center the content within the card.
  • Added line-height: normal to .card .info h1 to prevent text from overflowing.
• _sass/layout.scss
  • Increased max-width of .text-container from 750px to 1140px.
• css/program.css
  • Added margin: 0 0 0 20px to h3 to adjust spacing.
  • Modified .programlist-subscribe .discuss-community to use gap: 2rem instead of width: 80vw and gap: 1rem.
  • Increased width of .programlist-subscribe .form-container from 40rem to 50rem.
  • Added margin: 20px 0 10px 0 to h3 within the media query for smaller screens.

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.

---

A layout's a tricky thing,
Alignment's the song it sings.
With flex and with grid,
A perfect fit is bid,
Where beauty and function bring.

Footnotes

1. 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. ↩

[netlify]

✅ Deploy Preview for mesheryio-preview ready!

Name	Link
🔨 Latest commit	b18ac5c
🔍 Latest deploy log	https://app.netlify.com/sites/mesheryio-preview/deploys/67ed211effe93700085cecdc
😎 Deploy Preview	https://deploy-preview-2106--mesheryio-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[gemini-code-assist]

Code Review

This PR addresses UI inconsistencies on the Programs page, improving responsiveness and alignment. The changes seem reasonable and address the issues described. However, there are a few areas where improvements can be made to enhance the code's clarity and maintainability.

Summary of Findings

• CSS Specificity: The use of !important in the CSS can lead to specificity issues and make it harder to override styles in the future. It's generally better to avoid !important and instead rely on CSS specificity to ensure styles are applied correctly. I did not comment on this due to the review settings.
• Magic Numbers: The use of magic numbers (e.g., 20px, 50rem) without clear context or explanation can make the code harder to understand and maintain. Consider using variables or constants to represent these values with meaningful names. I did not comment on this due to the review settings.

Merge Readiness

The PR addresses the described UI issues and improves the Programs page's layout. However, addressing the suggested improvements, particularly regarding CSS specificity and magic numbers, would further enhance the code's quality and maintainability. I am unable to approve this pull request, and other reviewers should review and approve this code before merging. Given the medium severity issues identified, I recommend addressing them before merging.

[gemini-code-assist]

Consider defining this margin using a CSS variable to ensure consistency and easier modification across the project. This also helps in understanding the context of the value.

  margin: 0 0 0 var(--space-s); /* Use a defined variable for spacing */

[gemini-code-assist]

Consider using CSS variables for spacing to maintain consistency across the project. This makes it easier to adjust spacing values globally.

  gap: var(--space-m); /* Use a defined variable for spacing */

[gemini-code-assist]

Consider using CSS variables for width to maintain consistency across the project. This makes it easier to adjust width values globally.

  width: var(--form-container-width); /* Use a defined variable for width */

[gemini-code-assist]

Consider defining these margins using CSS variables to ensure consistency and easier modification across the project. This also helps in understanding the context of the value.

    margin: var(--space-m) 0 var(--space-s) 0; /* Use defined variables for spacing */

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue is being automatically closed due to inactivity. However, you may choose to reopen this issue.