[Bug] Feature card preview elements overflow outside card boundary on the features section

[khushboo-khatoon]

Description

On the features/product section of the landing page, both CTA cards have a layout overflow bug:

• Card 1 ("Share Content") — The YouTube and Spotify pill buttons on the right side extend visually beyond the white card background, appearing to float outside the card's container.

• Card 2 ("Grow") — The Clicks/CTR stats widget similarly overflows the right boundary of its parent card.

In both cases, the card's white background box ends before the right-side preview UI element, breaking the intended contained layout design.

I am adding St for reference

Steps to reproduce

1. Visit the Conn. landing page
2. Scroll to the features section
3. Observe the "Share Content" card — the YouTube/Spotify pills float outside the card
4. Observe the "Grow" card — the Clicks/CTR stats card overflows the card boundary

Expected behavior

The right-side preview UI elements (pills, stat cards) should be fully contained within the white card background, with consistent padding on all sides.

Actual behavior

The preview elements overflow the card's right/bottom edge, visually breaking out of the card container.

Files Likely Affected

• public/css/home.css → .use-case-card and .use-case-visual styles

please assign this issue to me under GSSoC' 26

[PriyadharshniG]

Hi @mayo-byte07,

I am a GSSoC 2026 contributor and would like to work on this issue.

I have experience with responsive UI design using HTML and CSS, and I can fix the overflow issue in the feature cards by properly adjusting the card container, spacing, and responsive layout while maintaining the existing design consistency.

Please assign this issue to me under GSSoC'26.
Thank you!

[snehamathad604]

Hi @mayo-byte07
I’m a participant in GSSoC 2026 and would like to work on this issue.
I have understood the overflow problem in the feature cards and can fix the layout responsiveness in home.css.
Please assign this issue to me. Thanks!

[Namratha36]

Hi @maintainer, I would like to work on this issue. Please assign it to me under GSSoC.

[Nightkilller]

Hi @mayo-byte07,

I would like to work on this issue under GSSoC 2026 if it is available.

From the screenshots and description, it appears that the preview UI elements inside the feature cards are exceeding their parent container boundaries due to layout sizing and positioning constraints.

My plan would be to:

• Inspect the .use-case-card and .use-case-visual styles in public/css/home.css.
• Identify the source of the overflow on both the "Share Content" and "Grow" cards.
• Ensure preview elements remain fully contained within the card boundaries with consistent internal spacing.
• Verify responsiveness across desktop and smaller screen sizes.
• Keep the fix limited to layout and overflow handling without altering the intended visual design.

Please let me know if I can be assigned to this issue. Thank you!

[mayo-byte07]

Have a good learning and thanks for the contribution!!!

[khushboo-khatoon]

Hi @mayo-byte07

Thank you for assigning this issue to me and for the opportunity to contribute under GSSoC'26.

When I raised this issue, the overflow bug was present .

I started setting up the project locally to work on the fix, but after completing the local setup and running the project, I noticed that the issue had already been resolved in the latest version 😔.