Merge pull request #446 from CodebilityDev/fix/status-tooltip-overflow

Fix: Allow status tooltip (e.g., “Graduated”) to display outside the card boundary

Author: yyyort

apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx

@@ -37,30 +37,36 @@ const STATUS_CONFIG: Record<
 > = {
   TRAINING: {
     label: "Training",
-    className: "bg-yellow-500/20 backdrop-blur-sm text-yellow-200 border border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-300",
+    className:
+      "bg-yellow-500/20 backdrop-blur-sm text-yellow-200 border border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-300",
   },
   GRADUATED: {
     label: "Graduated",
-    className: "bg-green-500/20 backdrop-blur-sm text-green-200 border border-green-500/30 dark:bg-green-500/10 dark:text-green-300",
+    className:
+      "bg-green-500/20 backdrop-blur-sm text-green-200 border border-green-500/30 dark:bg-green-500/10 dark:text-green-300",
   },
   INACTIVE: {
     label: "Inactive",
-    className: "bg-gray-500/20 backdrop-blur-sm text-gray-200 border border-gray-500/30 dark:bg-gray-500/10 dark:text-gray-300",
+    className:
+      "bg-gray-500/20 backdrop-blur-sm text-gray-200 border border-gray-500/30 dark:bg-gray-500/10 dark:text-gray-300",
   },
   MENTOR: {
     label: "Mentor",
-    className: "bg-purple-500/20 backdrop-blur-sm text-purple-200 border border-purple-500/30 dark:bg-purple-500/10 dark:text-purple-300",
+    className:
+      "bg-purple-500/20 backdrop-blur-sm text-purple-200 border border-purple-500/30 dark:bg-purple-500/10 dark:text-purple-300",
   },
   ADMIN: {
     label: "Admin",
-    className: "bg-blue-500/20 backdrop-blur-sm text-blue-200 border border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300",
+    className:
+      "bg-blue-500/20 backdrop-blur-sm text-blue-200 border border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300",
   },
   DEPLOYED: {
     label: "Deployed",
-    className: "bg-indigo-500/20 backdrop-blur-sm text-indigo-200 border border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300",
+    className:
+      "bg-indigo-500/20 backdrop-blur-sm text-indigo-200 border border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300",
   },
 };
- 
+
 const CodevCard = ({ codev, color }: Props) => {
   const [hovered, setHovered] = useState(false);
   const springConfig = { stiffness: 100, damping: 5 };
@@ -118,10 +124,10 @@ const CodevCard = ({ codev, color }: Props) => {
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
-      <div className="bg-white/10 backdrop-blur-md dark:bg-white/5 hover:bg-white/20 dark:hover:bg-white/10 flex h-full w-full flex-col items-center justify-between rounded-lg p-4 shadow-2xl transition-all duration-300 border border-white/20 dark:border-white/10 relative overflow-hidden group">
+      <div className="group relative flex h-full w-full flex-col items-center justify-between rounded-lg border border-white/20 bg-white/10 p-4 shadow-2xl backdrop-blur-md transition-all duration-300 hover:bg-white/20 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10">
         {/* Background decoration */}
-        <div className="absolute inset-0 bg-gradient-to-br from-customBlue-50/30 to-purple-50/30 dark:from-customBlue-950/10 dark:to-purple-950/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-        <div className="absolute -top-4 -right-4 h-32 w-32 rounded-full bg-gradient-to-br from-yellow-400/10 to-orange-400/10 blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+        <div className="from-customBlue-50/30 dark:from-customBlue-950/10 absolute inset-0 bg-gradient-to-br to-purple-50/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:to-purple-950/10" />
+        <div className="absolute -right-4 -top-4 h-32 w-32 rounded-full bg-gradient-to-br from-yellow-400/10 to-orange-400/10 opacity-0 blur-2xl transition-opacity duration-500 group-hover:opacity-100" />
         <div className="grid w-full grid-cols-4 gap-2">
           <div className="col-span-1" />
           <div className="relative col-span-2 flex justify-center">
@@ -180,9 +186,9 @@ const CodevCard = ({ codev, color }: Props) => {
               <p
                 className={cn(
                   "rounded-full border-2 p-2 text-[9px]",
-                  codev.availability_status 
-                    ? "bg-green-500 border-green-600" 
-                    : "bg-red-500 border-red-600",
+                  codev.availability_status
+                    ? "border-green-600 bg-green-500"
+                    : "border-red-600 bg-red-500",
                 )}
               ></p>
             </div>
@@ -195,13 +201,13 @@ const CodevCard = ({ codev, color }: Props) => {
                     <Button
                       variant="outline"
                       size="icon"
-                      className="bg-white/20 backdrop-blur-sm dark:bg-white/10 hover:bg-white/30 dark:hover:bg-white/20 border-white/30 dark:border-white/20 h-8 w-8 rounded-full transition-all duration-300"
+                      className="h-8 w-8 rounded-full border-white/30 bg-white/20 backdrop-blur-sm transition-all duration-300 hover:bg-white/30 dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/20"
                     >
                       <BookOpenIcon className="h-3.5 w-3.5" />
                     </Button>
                   </Link>
                 </TooltipTrigger>
-                <TooltipContent className="bg-white/10 backdrop-blur-md dark:bg-white/5 border border-white/20 dark:border-white/10 px-2 py-1 text-xs text-white">
+                <TooltipContent className="border border-white/20 bg-white/10 px-2 py-1 text-xs text-white backdrop-blur-md dark:border-white/10 dark:bg-white/5">
                   Read Bio
                 </TooltipContent>
               </Tooltip>
@@ -210,13 +216,15 @@ const CodevCard = ({ codev, color }: Props) => {
         </div>
         <div className="flex flex-col items-center gap-0.5">
           <div className="flex flex-col gap-1 text-center">
-            <p className="md:text-md text-sm capitalize text-white dark:text-white lg:text-base relative z-10">
+            <p className="md:text-md relative z-10 text-sm capitalize text-white dark:text-white lg:text-base">
               {codev.first_name} {codev.last_name}
             </p>
             {codev.display_position ? (
-              <p className="text-sm text-gray-200 dark:text-gray-300 relative z-10">{codev.display_position}</p>
+              <p className="relative z-10 text-sm text-gray-200 dark:text-gray-300">
+                {codev.display_position}
+              </p>
             ) : (
-              <div className="text-sm lg:text-base relative z-10">&nbsp;</div>
+              <div className="relative z-10 text-sm lg:text-base">&nbsp;</div>
             )}
           </div>
         </div>

apps/codebility/app/home/interns/_components/CodevCard.tsx

@@ -5,7 +5,7 @@ import CodevBadge from "@/components/CodevBadge";
 import DefaultAvatar from "@/components/DefaultAvatar";
 import Box from "@/components/shared/dashboard/Box";
 import { useModal } from "@/hooks/use-modal-users";
-import { Codev, CodevPoints, ApplicantStatus } from "@/types/home/codev";
+import { ApplicantStatus, Codev, CodevPoints } from "@/types/home/codev";
 import {
   AnimatePresence,
   motion,
@@ -29,23 +29,28 @@ const STATUS_CONFIG: Record<
 > = {
   applying: {
     label: "Applying",
-    className: "bg-customBlue-500/20 backdrop-blur-sm text-customBlue-200 border border-customBlue-500/30 dark:bg-customBlue-500/10 dark:text-customBlue-300",
+    className:
+      "bg-customBlue-500/20 backdrop-blur-sm text-customBlue-200 border border-customBlue-500/30 dark:bg-customBlue-500/10 dark:text-customBlue-300",
   },
   testing: {
     label: "Testing",
-    className: "bg-orange-500/20 backdrop-blur-sm text-orange-200 border border-orange-500/30 dark:bg-orange-500/10 dark:text-orange-300",
+    className:
+      "bg-orange-500/20 backdrop-blur-sm text-orange-200 border border-orange-500/30 dark:bg-orange-500/10 dark:text-orange-300",
   },
   onboarding: {
     label: "Onboarding",
-    className: "bg-purple-500/20 backdrop-blur-sm text-purple-200 border border-purple-500/30 dark:bg-purple-500/10 dark:text-purple-300",
+    className:
+      "bg-purple-500/20 backdrop-blur-sm text-purple-200 border border-purple-500/30 dark:bg-purple-500/10 dark:text-purple-300",
   },
   denied: {
     label: "Denied",
-    className: "bg-red-500/20 backdrop-blur-sm text-red-200 border border-red-500/30 dark:bg-red-500/10 dark:text-red-300",
+    className:
+      "bg-red-500/20 backdrop-blur-sm text-red-200 border border-red-500/30 dark:bg-red-500/10 dark:text-red-300",
   },
   passed: {
     label: "Passed",
-    className: "bg-green-500/20 backdrop-blur-sm text-green-200 border border-green-500/30 dark:bg-green-500/10 dark:text-green-300",
+    className:
+      "bg-green-500/20 backdrop-blur-sm text-green-200 border border-green-500/30 dark:bg-green-500/10 dark:text-green-300",
   },
 };
 
@@ -61,7 +66,7 @@ export default function CodevCard({ codev }: CodevCardProps) {
   const springConfig = { stiffness: 100, damping: 5 };
   const x = useMotionValue(0);
   const rotate = useSpring(
-    useTransform(x, [-100, 100], [-45, 45]),
+    useTransform(x, [-100, 100], [-20, 20]),
     springConfig,
   );
   const translateX = useSpring(
@@ -75,28 +80,28 @@ export default function CodevCard({ codev }: CodevCardProps) {
   };
 
   const applicationStatus = codev.application_status || "applying";
-  const statusConfig = STATUS_CONFIG[applicationStatus as ApplicantStatus] || STATUS_CONFIG.applying;
+  const statusConfig =
+    STATUS_CONFIG[applicationStatus as ApplicantStatus] ||
+    STATUS_CONFIG.applying;
 
   return (
     <div
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       onMouseMove={handleMouseMove}
     >
-      <div
-        className="group relative h-full rounded-2xl bg-white/10 backdrop-blur-md p-4 shadow-lg transition-all duration-300 hover:bg-white/20 hover:shadow-xl dark:bg-white/5 dark:hover:bg-white/10 border border-white/20 dark:border-white/10 overflow-hidden"
-      >
+      <div className="group relative h-full rounded-2xl border border-white/20 bg-white/10 p-4 shadow-lg backdrop-blur-md transition-all duration-300 hover:bg-white/20 hover:shadow-xl dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10">
         {/* Background decoration */}
-        <div className="absolute inset-0 bg-gradient-to-br from-customBlue-50/20 to-purple-50/20 dark:from-customBlue-950/10 dark:to-purple-950/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-        <div className="absolute -top-4 -right-4 h-24 w-24 rounded-full bg-gradient-to-br from-yellow-400/10 to-orange-400/10 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+        <div className="from-customBlue-50/20 dark:from-customBlue-950/10 absolute inset-0 bg-gradient-to-br to-purple-50/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:to-purple-950/10" />
+        <div className="absolute -right-4 -top-4 h-24 w-24 rounded-full bg-gradient-to-br from-yellow-400/10 to-orange-400/10 opacity-0 blur-xl transition-opacity duration-500 group-hover:opacity-100" />
         <div
           className="flex h-full cursor-pointer flex-col justify-start gap-4"
           onClick={() => onOpen("profileModal", codev)}
         >
           {/* Header Section */}
           <div className="relative flex items-start justify-start gap-4">
             <div className="relative">
-              <div className="h-16 w-16 overflow-hidden rounded-full bg-gradient-to-br from-customBlue-100 to-purple-100 p-0.5 dark:from-customBlue-900 dark:to-purple-900">
+              <div className="from-customBlue-100 dark:from-customBlue-900 h-16 w-16 overflow-hidden rounded-full bg-gradient-to-br to-purple-100 p-0.5 dark:to-purple-900">
                 <div className="h-full w-full overflow-hidden rounded-full bg-white dark:bg-gray-800">
                   {codev.image_url ? (
                     <img
@@ -120,8 +125,8 @@ export default function CodevCard({ codev }: CodevCardProps) {
                       scale: 1,
                       transition: {
                         type: "spring",
-                        stiffness: 260,
-                        damping: 10,
+                        stiffness: 120,
+                        damping: 20,
                       },
                     }}
                     exit={{ opacity: 0, y: 20, scale: 0.6 }}
@@ -131,14 +136,13 @@ export default function CodevCard({ codev }: CodevCardProps) {
                       whiteSpace: "nowrap",
                     }}
                     className={cn(
-                      `absolute -top-16 left-1/2 z-[100] flex -translate-x-1/2
-                       transform flex-col items-center justify-center rounded-xl px-3 py-2 shadow-xl 
-                        ${statusConfig?.className || ''}
+                      `right-1/8 -translate-x-1/8 absolute -top-8 z-50 flex transform flex-col items-center justify-center rounded-lg px-4 py-2 shadow-xl 
+                        ${statusConfig?.className || ""}
                        `,
                     )}
                   >
                     <div className="relative z-30 text-sm font-medium">
-                      {statusConfig?.label || 'Applying'}
+                      {statusConfig?.label || "Applying"}
                     </div>
                   </motion.div>
                 )}
@@ -148,7 +152,9 @@ export default function CodevCard({ codev }: CodevCardProps) {
                 <div
                   className={cn(
                     "h-4 w-4 rounded-full border-2 border-white dark:border-gray-800",
-                    codev.availability_status === true ? "bg-green-500" : "bg-red-500",
+                    codev.availability_status === true
+                      ? "bg-green-500"
+                      : "bg-red-500",
                   )}
                 ></div>
               </div>
@@ -158,14 +164,15 @@ export default function CodevCard({ codev }: CodevCardProps) {
               <h3 className="text-xl font-medium text-gray-900 dark:text-white">
                 {codev.first_name} {codev.last_name}
               </h3>
-              <p className="text-sm font-medium text-customBlue-300 dark:text-customBlue-100">
+              <p className="text-customBlue-300 dark:text-customBlue-100 text-sm font-medium">
                 {codev.display_position || "No Position"}
               </p>
               {/* Years of Experience */}
               {codev.years_of_experience !== undefined && (
                 <div className="text-sm text-gray-500 dark:text-gray-400">
                   {codev.years_of_experience}{" "}
-                  {codev.years_of_experience === 1 ? "year" : "years"} experience
+                  {codev.years_of_experience === 1 ? "year" : "years"}{" "}
+                  experience
                 </div>
               )}
               {/* Add CodevBadge here */}
@@ -199,8 +206,8 @@ export default function CodevCard({ codev }: CodevCardProps) {
                 <Badge
                   variant="info"
                   key={project.id}
-                  className="rounded-full bg-gradient-to-r from-customBlue-600 to-indigo-600 px-3 py-1 text-xs font-medium text-white transition-all duration-300
-                    hover:from-customBlue-700 hover:to-indigo-700 dark:from-customBlue-500 dark:to-indigo-500 dark:hover:from-customBlue-600 dark:hover:to-indigo-600
+                  className="from-customBlue-600 hover:from-customBlue-700 dark:from-customBlue-500 dark:hover:from-customBlue-600 rounded-full bg-gradient-to-r to-indigo-600 px-3 py-1 text-xs font-medium
+                    text-white transition-all duration-300 hover:to-indigo-700 dark:to-indigo-500 dark:hover:to-indigo-600
                   "
                 >
                   {project.name}