Fix text clipping in gradient headings (Fixes #95)

[itsvishalyadav]

Fix text clipping in gradient headings

Issue

Fixed text clipping issue where descenders (letters like "g" and "y") were being cut off in gradient text headings using bg-clip-text.

Changes

• Added overflow-visible to parent containers
• Set lineHeight: '1.3' and paddingBottom: '0.25rem' to headings with gradient text
• Fixed clipping in:
  • "My CATs" heading (y was clipped)
  • "Loading Your CATs" title (g was clipped)
  • "Token Management" heading (g was clipped)

Files Modified

• web/src/app/my-cats/page.tsx
• web/src/components/ui/loading-state.tsx
• web/src/app/[cat]/InteractionClient.tsx

Fixes #95

Summary by CodeRabbit

• Bug Fixes
  • Fixed text clipping issues in gradient headings across the application. Improved overflow handling and adjusted typography to prevent descenders and characters from being cut off in headings.

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

[coderabbitai]

Walkthrough

This PR fixes text clipping issues in gradient headings across three components by adding overflow-visible to parent containers and applying consistent inline heading styles with lineHeight: 1.3 and paddingBottom: 0.25rem. Addresses issue #95 affecting headings like "My CATs", "Loading Your CATs", and "Token Management".

Changes

Cohort / File(s)	Summary
Gradient heading overflow fixes web/src/app/my-cats/page.tsx, web/src/components/ui/loading-state.tsx, web/src/app/[cat]/InteractionClient.tsx	Added overflow-visible class to parent containers and applied inline styles (lineHeight: '1.3', paddingBottom: '0.25rem') to heading elements to prevent text clipping in gradient text

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

This consists of simple, repetitive styling changes applied consistently across three files with no logic modifications.

Possibly related PRs

• UI Inhancement of every page of Clowder #52: Modifies the same three files with overlapping heading and container styling adjustments for gradient text rendering.

Suggested reviewers

• ceilican

Poem

🐰 A clipping tale once plagued the page,
Where g's and tails met their cage,
But overflow-visible saved the day,
With padding and line-height at play—
Now gradients shine without dismay! ✨

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 accurately and concisely describes the main change: fixing text clipping in gradient headings and references the linked issue #95.
Linked Issues check	✅ Passed	The pull request successfully addresses issue #95 by implementing CSS fixes (overflow-visible, lineHeight, paddingBottom) to prevent descender clipping in gradient text headings across all three affected files.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing text clipping in gradient headings; no unrelated modifications or scope creep detected across the three modified files.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

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: 0

🧹 Nitpick comments (3)

web/src/app/[cat]/InteractionClient.tsx (1)

1032-1041: Prefer Tailwind utilities (or a shared “gradient-heading” class) over repeated inline styles.
Keeps styling consistent and avoids stringly-typed lineHeight.

-        <div className="text-center mb-8 overflow-visible">
+        <div className="text-center mb-8 overflow-visible">
           <motion.h1 
             className="text-4xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-blue-200 dark:from-[#FFD600] dark:to-white mb-4 md:mb-0 drop-shadow-lg"
-            style={{ lineHeight: '1.3', paddingBottom: '0.25rem' }}
+            // Tailwind: pb-1 = 0.25rem
+            // (If you want exact 1.3, keep leading-[1.3]; otherwise consider leading-snug)
+            // eslint-disable-next-line react/forbid-dom-props
+            className="text-4xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-blue-200 dark:from-[#FFD600] dark:to-white mb-4 md:mb-0 drop-shadow-lg leading-[1.3] pb-1"

web/src/app/my-cats/page.tsx (1)

694-703: Fix is fine; same suggestion: replace inline style with Tailwind utilities/shared class.

-            <div className="flex flex-col md:flex-row justify-between items-center mb-12 overflow-visible">
+            <div className="flex flex-col md:flex-row justify-between items-center mb-12 overflow-visible">
               <motion.h1
-                className="text-4xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-blue-300 dark:from-[#FFD600] dark:to-yellow-100 mb-4 md:mb-0 drop-shadow-lg"
-                style={{ lineHeight: '1.3', paddingBottom: '0.25rem' }}
+                className="text-4xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-blue-300 dark:from-[#FFD600] dark:to-yellow-100 mb-4 md:mb-0 drop-shadow-lg leading-[1.3] pb-1"

web/src/components/ui/loading-state.tsx (1)

22-50: LGTM for clipping; consider Tailwind utilities to avoid inline style duplication.

-        <div className="text-center mb-12 overflow-visible">
+        <div className="text-center mb-12 overflow-visible">
           ...
           <motion.h1 
             className={`text-4xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r ${
               type === "loading"
                 ? "from-blue-600 to-blue-200 dark:from-[#FFD600] dark:to-white"
                 : "from-red-600 to-red-200 dark:from-red-400 dark:to-red-200"
-            } mb-4`}
-            style={{ lineHeight: '1.3', paddingBottom: '0.25rem' }}
+            } mb-4 leading-[1.3] pb-1`}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 01b376c and 1aac739.

📒 Files selected for processing (4)

• PR_DESCRIPTION.md (1 hunks)
• web/src/app/[cat]/InteractionClient.tsx (1 hunks)
• web/src/app/my-cats/page.tsx (1 hunks)
• web/src/components/ui/loading-state.tsx (2 hunks)

🔇 Additional comments (1)

PR_DESCRIPTION.md (1)

1-20: Clear, scoped PR description (incl. issue reference + affected headings).