Ui: Improve blog card title/byline truncation and spacing

[saurabhraghuvanshii]

Description

Resource cards truncate key text (title) too aggressively and have inconsistent overflow/spacing behavior.

Expected Behavior

1. Title horizontal spacing
   • Reduce left/right padding (or margin) to 1rem for the post-title line(s) only
   • Keep existing padding/margins for all other card content
2. Title overflow
   • Allow post-title to wrap up to 2 lines
   • If overflow remains, apply ellipsis (…) after line 2
3. Date/byline overflow
   • Keep date + byline on a single line
   • Apply ellipsis on overflow (no wrapping)
4. Bottom spacing
   • Ensure “See also” never touches the bottom of the card
   • Maintain at least 1rem of bottom padding inside the card at all times

Screenshots

Environment:

• Host OS:
• Browser:

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[Daniel-1600]

Can i work this @saurabhraghuvanshii ?

[jothikaaravindhan]

Hi saurabhraghuvanshii ! I'm exploring Layer5 projects. If this issue is unassigned, may I work on it?

[saurabhraghuvanshii]

Thanks @Daniel-1600 but let's give chance to @jothikaaravindhan also.

[jothikaaravindhan]

Thanks saurabhraghuvanshii !