[Bug]: Text Overflow Issue in Featured Templates Cards

[anushka-sys]

Where are you from?
[ ] GSSoC
[x] OSCI

Describe the bug

On mid-sized and mobile screens, the "Try Template" text inside the cards overflows and goes out of the card boundary, breaking the layout and affecting responsiveness.

Steps to Reproduce

Steps to reproduce the behavior:

1. Go to the Featured Templates section.
2. Resize the browser window to mid-sized or mobile screen width.
3. Observe the "Try Template" button inside the cards.
4. See the text overflowing outside the card.

Expected behavior

The "Try Template" text should stay properly contained within the card and adjust responsively for all screen sizes.

Screenshots

Desktop :

OS: Windows 11
Browser: Chrome
Version: Latest
Tested Screen Sizes:
650px × 742px → Overflow issue observed
1024px × 600px → Slight overflow
Laptop (1366px) → Works fine ✅

Smartphone :

Device: iPad Pro
OS: iPadOS
Tested Screen Sizes:
iPad Pro (~1024px) → Slight overflow
Mobile phones (<640px) → overflow

Suggested Fix :

I plan to:

Update the grid layout to display 2 cards per row for mid-sized screens.
Add flex-wrap to the rating + "Try Template" container for better responsiveness.
Test across mobile, tablet, and desktop widths to ensure the fix works perfectly.

I searched existing issues but couldn’t find this one. Please close if it’s a duplicate.

I would like to work on this issue, kindly assign it to me.

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊

[GollaBharath]

@anushka-sys I have assingned this issue to you

[anushka-sys]

I’ve created a PR and fixed the issue
It’s a CSS/style-only fix. Please review when you have a chance. Thanks!