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 = (props: ProfileHeaderProps) => { const showMyStatusLabel = canEdit const showAdminLabel = isPrivilegedViewer - return ( + const content = (
{showMyStatusLabel && My status:} @@ -133,6 +133,17 @@ const ProfileHeader: FC = (props: ProfileHeaderProps) => { />
) + + return canEdit ? ( + + {content} + + ) : ( + content + ) } function renderActivityStatus(): JSX.Element { @@ -222,15 +233,17 @@ const ProfileHeader: FC = (props: ProfileHeaderProps) => {

- { - canSeeActivityBadge ? renderActivityStatus() : undefined - } +
+ { + 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 + } +
{ isMobile ? renderMemberPhotoWrap() : undefined