[UI] Programs Page

[psankhe28]

Description

On hovering the cards, the text is not properly aligned. It can be seen in the below video:

Vid1

Expected Behavior

Vid2

Enviroment:

• OS: Windows
• Browser: Brave
• Device: Desktop

---

Contributor Guides and Handbook

The meshery.io website uses Jekyll and GitHub Pages. Site content is found under the master branch.

• 📚 See the Contributing to Meshery.io Website section of the readme.md and other contributing instructions, too.
• 🎨 Wireframes and designs for Meshery UI in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[ritiksaxena124]

Thank you @psankhe28 for opening up an issue for this. I was thinking if we should keep the position of the text at the bottom-left and the text decoration be left-align or the position of the text be bottom-center and the text-decoration be center because if we are positioning the text at the center both vertically and horizontally as you have shown in expected behavior video then the text LFX and MLH is not quite visible.

[psankhe28]

Should I proceed with the left-aligned version or the centered one?

[ritiksaxena124]

text-decoration: center; will work better in my opinion because other 3 cards (from start) are center aligned.

[psankhe28]

Should I make a PR with the change?

[ritiksaxena124]

Go ahead