From 50f706bb1dd5c1b8b017f83b577d6e563a1d5a6a Mon Sep 17 00:00:00 2001
From: himaniraghav3 <himaniraghav0311@gmail.com>
Date: Wed, 28 Jan 2026 16:01:29 +0530
Subject: [PATCH] PM-3458 Fix UI issues with active badge

---
 .../profile-header/ProfileHeader.module.scss              | 8 ++++++++
 .../src/member-profile/profile-header/ProfileHeader.tsx   | 6 +++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss
index e17b5b163..fb9b438a5 100644
--- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss
+++ b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss
@@ -156,6 +156,14 @@
     }
 }
 
+.tooltipText {
+  z-index: 20;
+  white-space: normal;
+  max-width: 240px;
+  word-wrap: break-word;
+  font-size: 14px; 
+}
+
 :global(#start-hiring-form) {
     min-height: 380px;
 }
\ No newline at end of file
diff --git a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
index f8443e19d..d9ba07d7f 100644
--- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
+++ b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
@@ -53,6 +53,9 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
         [state?.queriedSkills],
     )
 
+    const activeTooltipText = canEdit ? `You have been active in the past 3 months. 
+(this information is visible to you only)` : `${props.profile.firstName} has been active in the past 3 months.`
+
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.names) {
             setIsNameEditMode(true)
@@ -111,9 +114,10 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
     function renderActivityStatus(): JSX.Element {
         return (
             <Tooltip
-                content='You have been active in the past 3 months. (this information is visible to you only)'
+                content={activeTooltipText}
                 triggerOn='hover'
                 place='top'
+                className={styles.tooltipText}
             >
                 <div className={styles.activeBadge}>
                     Active