Fix text clipping in gradient headings (Fixes #95)

PR_DESCRIPTION.md

@@ -0,0 +1,20 @@
+# 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
+

web/src/app/[cat]/InteractionClient.tsx

@@ -1029,9 +1029,10 @@ export default function InteractionClient() {
       </AnimatePresence>
       <div className="max-w-7xl mx-auto space-y-8 px-4 py-8">
         {/* Header Section */}
-        <div className="text-center mb-8">
+        <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' }}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}

web/src/app/my-cats/page.tsx

@@ -691,9 +691,10 @@ export default function MyCATsPage() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
-            <div className="flex flex-col md:flex-row justify-between items-center mb-12">
+            <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' }}
                 initial={{ opacity: 0, y: -20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.5 }}

web/src/components/ui/loading-state.tsx

@@ -19,7 +19,7 @@ export function LoadingState({
   return (
     <div className="min-h-screen mx-auto">
       <div className="max-w-7xl mx-auto space-y-8 px-4 py-12">
-        <div className="text-center mb-12">
+        <div className="text-center mb-12 overflow-visible">
           <motion.div
             className={`w-24 h-24 mx-auto mb-8 rounded-full bg-gradient-to-br ${
               type === "loading"
@@ -41,6 +41,7 @@ export function LoadingState({
                 ? "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' }}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}