From afd982f9ff11f4763767498d968726b97db2a3f7 Mon Sep 17 00:00:00 2001
From: himaniraghav3 <himaniraghav0311@gmail.com>
Date: Wed, 28 Jan 2026 21:46:13 +0530
Subject: [PATCH] PM-3456 Add tooltip and fix mobile view

---
 .../page-layout/ProfilePageLayout.module.scss |  6 ++---
 .../profile-header/ProfileHeader.module.scss  | 16 +++++++++++
 .../profile-header/ProfileHeader.tsx          | 27 ++++++++++++++-----
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss
index 1abd16f18..17585a6a0 100644
--- a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss
+++ b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss
@@ -42,11 +42,11 @@
             @include ltelg {
                 position: absolute;
                 top: $sp-4;
-                right: $sp-4;
-                left: auto;
+                left: $sp-1;
+                right: auto;
+                justify-content: flex-start;
                 max-width: none;
                 width: auto;
-                padding: 0;
                 pointer-events: auto;
             }
 
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 fb9b438a5..34e8eae04 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
@@ -62,6 +62,7 @@
         @include ltelg {
             flex-direction: column;
             align-items: flex-start;
+            margin-top: $sp-15;
         }
 
         .profileInfo {
@@ -127,6 +128,8 @@
 
         @include ltelg {
             margin-top: $sp-4;
+            padding: 6px 14px;
+            min-height: 44px;
         }
 
         >span {
@@ -153,6 +156,8 @@
 
    @include ltelg {
         margin-top: $sp-4;
+        margin-right: 0px;
+        padding: 10px 14px;
     }
 }
 
@@ -164,6 +169,17 @@
   font-size: 14px; 
 }
 
+.statusRow {
+    display: flex;
+
+    @include ltelg {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: $sp-2;
+    }
+}
+
 :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 e30df490c..d91ad4d3e 100644
--- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
+++ b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
@@ -113,7 +113,7 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
         const showMyStatusLabel = canEdit
         const showAdminLabel = isPrivilegedViewer
 
-        return (
+        const content = (
             <div className={styles.profileActions}>
                 {showMyStatusLabel && <span>My status:</span>}
 
@@ -133,6 +133,17 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
                 />
             </div>
         )
+
+        return canEdit ? (
+            <Tooltip
+                content='This information is visible to you only'
+                place='top'
+            >
+                {content}
+            </Tooltip>
+        ) : (
+            content
+        )
     }
 
     function renderActivityStatus(): JSX.Element {
@@ -222,15 +233,17 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
                     </p>
                 </div>
             </div>
-            {
-                canSeeActivityBadge ? renderActivityStatus() : undefined
-            }
+            <div className={styles.statusRow}>
+                {
+                    canSeeActivityBadge ? renderActivityStatus() : undefined
+                }
 
-            {
+                {
                 // Showing only when they can edit until we have the talent search app
                 // and enough data to make this useful
-                canEdit || isPrivilegedViewer ? renderOpenForWork() : undefined
-            }
+                    canEdit || isPrivilegedViewer ? renderOpenForWork() : undefined
+                }
+            </div>
 
             {
                 isMobile ? renderMemberPhotoWrap() : undefined