Skip to content

PM-3456 Add tooltip and fix mobile view #1431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
himaniraghav3 merged 1 commit into from
Jan 29, 2026
+39 −10
Merged

PM-3456 Add tooltip and fix mobile view #1431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
16 changes: 16 additions & 0 deletions src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
@include ltelg {
flex-direction: column;
align-items: flex-start;
margin-top: $sp-15;
}

.profileInfo {
Expand Down Expand Up @@ -127,6 +128,8 @@

@include ltelg {
margin-top: $sp-4;
padding: 6px 14px;
min-height: 44px;
}

>span {
Expand All @@ -153,6 +156,8 @@

@include ltelg {
margin-top: $sp-4;
margin-right: 0px;
padding: 10px 14px;
}
}

Expand All @@ -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;
}
27 changes: 20 additions & 7 deletions src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>}

Expand All @@ -133,6 +133,17 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
/>
</div>
)

return canEdit ? (
Copy link

@github-actions github-actions bot Jan 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[⚠️ maintainability]
The conditional rendering of the Tooltip component based on canEdit is correct, but consider extracting this logic into a separate function for better maintainability and readability. This will make it easier to test and modify in the future.

<Tooltip
content='This information is visible to you only'
place='top'
>
{content}
</Tooltip>
) : (
content
)
}

function renderActivityStatus(): JSX.Element {
Expand Down Expand Up @@ -222,15 +233,17 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
</p>
</div>
</div>
{
canSeeActivityBadge ? renderActivityStatus() : undefined
}
<div className={styles.statusRow}>
Copy link

@github-actions github-actions bot Jan 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[⚠️ design]
The addition of a div with className={styles.statusRow} around the conditional rendering logic is a good structural change, but ensure that this does not unintentionally affect the layout or styling, especially in mobile view. Verify that the styles are correctly applied and do not conflict with existing styles.

{
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
Expand Down
Loading