Fix text padding issue causing letters to be cut off #813

[divyanshmrawal]

🐞 Fix: Text Padding Issue Causing Letters to Be Cut Off (#813)

📌 Summary

This PR fixes a UI text padding issue where insufficient padding caused certain characters to be partially clipped. The update ensures that all text is fully visible, improving readability and overall user experience.

🔍 Problem

Some UI components had inadequate padding around text, resulting in letters being cut off, especially at the edges.

✅ Solution

• Adjusted text padding for the affected UI components
• Ensured consistent spacing so all characters render fully
• Improved visual clarity without impacting layout alignment

🧪 Testing

• Verified the fix on the affected screens/components
• Confirmed that text now renders completely without clipping
• Existing functionality remains unchanged

Closes #813

Summary by CodeRabbit

• Style
  • Enhanced vertical spacing on page headings across the FAQ, home, and landing pages for improved visual hierarchy and layout consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Three page components receive added padding classes to their heading elements. The changes add pb-2 or pb-3 (Tailwind bottom-padding utilities) to heading elements across the FAQ, Home, and pictopy-landing pages to resolve text cutoff issues.

Changes

Cohort / File(s)	Summary
Heading Padding Fixes landing-page/src/Pages/FaqPage/FAQ.tsx, landing-page/src/Pages/Landing page/Home1.tsx, landing-page/src/Pages/pictopy-landing.tsx	Adds bottom padding (pb-2 or pb-3) to h1 and h3 heading elements to increase vertical spacing and prevent text clipping.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

These changes are straightforward CSS class additions with no logic modifications. All three files follow the same pattern—adding a single Tailwind utility class to a heading element. The consistency and simplicity of the edits require minimal review effort.

Suggested labels

hacktoberfest-accepted

Poem

🐰 A tiny tweak, a dash of space,
Padding blooms in every place,
No more letters cut in two,
Text stands tall, crisp and true!
—The Rabbit Dev ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ 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 directly addresses the main change—fixing text padding to prevent letters from being cut off, which matches the PR's core objective.
Linked Issues check	✅ Passed	The PR successfully addresses issue #813 by adding padding (pb-2, pb-3) to multiple heading elements to prevent text clipping and improve readability.
Out of Scope Changes check	✅ Passed	All changes are narrowly scoped to adding padding to heading elements in three files, directly addressing the text clipping issue without unrelated modifications.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d07d817 and 5d7da5c.

📒 Files selected for processing (3)

• landing-page/src/Pages/FaqPage/FAQ.tsx
• landing-page/src/Pages/Landing page/Home1.tsx
• landing-page/src/Pages/pictopy-landing.tsx

🔇 Additional comments (3)

landing-page/src/Pages/Landing page/Home1.tsx (1)

21-21: LGTM! Padding fix resolves gradient text clipping.

The addition of pb-2 to the gradient heading addresses the text cutoff issue described in #813. This provides adequate bottom padding to ensure descenders are fully visible when using bg-clip-text.

landing-page/src/Pages/FaqPage/FAQ.tsx (1)

58-58: LGTM! Padding fix addresses text clipping in FAQ heading.

The pb-3 addition resolves the gradient text cutoff issue for the FAQ heading. The padding ensures all characters, including descenders, render fully without being clipped by the gradient text styling.

landing-page/src/Pages/pictopy-landing.tsx (1)

59-59: LGTM! Padding addition prevents text cutoff on main heading.

The pb-3 class successfully addresses the text clipping issue for the main landing page heading. This ensures the gradient text displays completely without cutting off any characters.

---

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.}