Fix project card text overflow on landing page

[madhavansingh]

Addressed Issues:

Fixes #668

Screenshots:

Before Fix

• Project title text overflows outside the project card container on the landing page.

After Fix

• Project title text now wraps properly and stays inside the card container without breaking the layout.

Additional Notes:

This PR fixes a UI issue where project titles overflow outside the project card container on the landing page.

The fix ensures that long titles wrap correctly and remain within the card boundaries across different screen sizes, improving the layout and overall user experience.

I am also interested in contributing further and preparing for GSoC 2026.

AI Usage Disclosure:

• This PR does not contain AI-generated code at all.
• This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions
• If applicable, I have made corresponding changes or additions to the documentation
• If applicable, I have made corresponding changes or additions to tests
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contribution Guidelines
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

I am also interested in contributing further and preparing for GSoC 2026.

Summary by CodeRabbit

• Improvements

  • Enhanced text wrapping on cards for better readability across complex/compound words.
  • Improved container overflow handling and word-breaking to ensure consistent layout on various screen sizes.
  • Updated card visuals: refined heading sizing, spacing, and reduced thumbnail width for improved balance.

• Accessibility

  • Headings now include a title attribute so full text is preserved for assistive tech and tooltips.

• Visual

  • Minor structural tweaks enable smoother 3D flip presentation of cards.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a72618f5-4793-4f20-8003-9ad3ea792e22

📥 Commits

Reviewing files that changed from the base of the PR and between 553e327 and aa2f204.

📒 Files selected for processing (1)

• src/components/home/CardEffect.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/home/CardEffect.jsx

---

📝 Walkthrough

Walkthrough

CardEffect.jsx now computes a camelCase-aware wrappedHeading (inserting zero-width spaces), uses it for rendering with a title attribute, adds overflow/word-break styling, adjusts some layout markup and image sizing; no public API changes.

Changes

Cohort / File(s)	Summary
Text Wrapping & Layout src/components/home/CardEffect.jsx	Adds wrappedHeading to insert zero-width spaces at camelCase boundaries and uses it for display (original text preserved via title); adds overflow-hidden and break-words classes, adjusts front/back face markup and image size, and minor className/indentation refactors.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• Zahnentferner

Poem

🐰 I hopped through code tonight,

slipped tiny spaces in sight,
CamelCase learned to bend,
Cards hold titles to the end,
Layout neat — I twitch with delight.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change—fixing project card text overflow on the landing page—which aligns with the primary objective in the PR and linked issue #668.
Linked Issues check	✅ Passed	The PR changes address the core requirement from issue #668: wrapping project titles to prevent overflow outside card boundaries, with fixes for edge cases to ensure text remains properly contained within cards.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the text overflow issue in CardEffect.jsx; no unrelated modifications or scope creep detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/home/CardEffect.jsx`:
- Around line 7-11: The code calls heading.replace(...) which will throw if
heading is null/undefined; update the wrappedHeading computation (the variable
wrappedHeading inside CardEffect.jsx) to coerce heading to a safe string before
calling replace (for example use heading ?? '' or String(heading)) and then
apply the two .replace(...) calls so replacement only runs on a guaranteed
string.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b6bd9693-bf78-4ab6-927c-c27af8224264

📥 Commits

Reviewing files that changed from the base of the PR and between 3fa685f and 553e327.

📒 Files selected for processing (1)

• src/components/home/CardEffect.jsx

[madhavansingh]

Hi! I have opened a PR to fix this issue. Please let me know if any changes are required. I am also looking forward to contributing more and preparing for GSoC 2026.

[reach2saksham]

Hi @madhavansingh , since you are working on this issue. Can you see that in the 1st image under (After), the word perspective is still reaching the edges of the card? For a better UI/UX, you can still update your PR so that these edge cases are handled either with proper padding or another method you come up with.

[madhavansingh]

Hi @reach2saksham, thanks for pointing that out.

I’ve updated the styling to properly handle the edge cases you mentioned. The card content now has improved padding and safe word wrapping so that long titles (like "Perspective" or longer project names) no longer reach the edges of the card.

I’ve pushed the updated fix to this PR. Please find the updated screenshots below showing the corrected layout.

Let me know if any further adjustments are needed. Thanks again for the helpful feedback!

[reach2saksham]

@madhavansingh , This feels much better.