From 06082695f53980191c63e0f0f8aea74da3d935bd Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Tue, 18 Jul 2023 14:46:35 +0300
Subject: [PATCH 1/2] MP-234 mobile view init

---
 .../about-me/AboutMe.module.scss              |   4 +
 .../CommunityAwards.module.scss               |   9 ++
 .../ModifyMemberLinksModal.module.scss        |   6 +
 .../page-layout/ProfilePageLayout.module.scss |  17 ++-
 .../page-layout/ProfilePageLayout.tsx         | 129 ++++++++----------
 .../profile-header/ProfileHeader.module.scss  |  37 ++++-
 .../profile-header/ProfileHeader.tsx          |  59 +++++---
 .../ChallengeWinsBanner.module.scss           |  12 ++
 .../MemberTCAchievements.module.scss          |  18 +++
 .../tc-achievements/MemberTCAchievements.tsx  |   2 +-
 10 files changed, 193 insertions(+), 100 deletions(-)

diff --git a/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss b/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss
index 669c78ec9..f60bef8a7 100644
--- a/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss
+++ b/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss
@@ -26,4 +26,8 @@
 .empty {
     height: auto;
     margin-top: $sp-4;
+
+    @include ltelg {
+        padding: $sp-4 $sp-4 $sp-4 0;
+    }
 }
diff --git a/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss b/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss
index a5e7af9f3..f3e4df541 100644
--- a/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss
+++ b/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss
@@ -11,6 +11,10 @@
         align-items: center;
         margin-bottom: $sp-10;
 
+        @include ltelg {
+            margin-bottom: $sp-4;
+        }
+
         .viewAllLink {
             text-transform: uppercase;
             color: $turq-160;
@@ -40,6 +44,11 @@
             transition: 0.25s ease-in-out;
             box-shadow: 0 0 0 rgba(0, 0, 0, 0);
 
+            @include ltelg {
+                padding-bottom: 0;
+                padding-left: $sp-2;
+            }
+
             &:hover {
                 box-shadow: 0 0 16px rgba(22, 103, 154, 0.5);
             }
diff --git a/src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss b/src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss
index 6c4600f52..945c28398 100644
--- a/src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss
+++ b/src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss
@@ -69,6 +69,12 @@
             display: flex;
             align-items: center;
 
+            p {
+                @include ltelg {
+                    word-break: break-all;
+                }
+            }
+
             svg {
                 width: 16px;
                 height: 16px;
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 e6e82f481..40728ea6f 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
@@ -21,11 +21,19 @@
 
         .profileHeaderContentOuter {
             margin-top: 75px;
+
+            @include ltelg {
+                margin-top: 0;
+            }
         }
 
         .profileHeaderBottom {
             height: 90px;
-            background-color: $tc-white
+            background-color: $tc-white;
+
+            @include ltelg {
+                height: 30px;
+            }
         }
     }
 
@@ -65,7 +73,7 @@
                 margin-top: -275px;
 
                 @include ltelg {
-                    margin-top: 0;
+                    margin-top: $sp-8;
                 }
 
                 .shortBio {
@@ -102,4 +110,9 @@
     padding: $sp-8 $sp-8 0;
     margin-bottom: $sp-8;
     border-radius: 16px;
+
+    @include ltelg {
+        padding: $sp-4;
+        padding-bottom: 0;
+    }
 }
diff --git a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx
index 3ecf5ee90..262ee9025 100644
--- a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx
+++ b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx
@@ -2,7 +2,6 @@ import { FC } from 'react'
 
 import { UserProfile } from '~/libs/core'
 import { ContentLayout, PageTitle } from '~/libs/ui'
-import { useCheckIsMobile } from '~/libs/shared'
 
 // import { MemberTCActivityInfo } from '../tc-activity'
 import { MemberSkillsInfo } from '../skills'
@@ -24,103 +23,85 @@ interface ProfilePageLayoutProps {
     authProfile: UserProfile | undefined
 }
 
-const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutProps) => {
-    const isMobile: boolean = useCheckIsMobile()
+const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutProps) => (
+    <div className={styles.container}>
 
-    return (
-        <div className={styles.container}>
+        <PageTitle>{`${props.profile.handle} | Community Profile | Topcoder`}</PageTitle>
 
-            <PageTitle>{`${props.profile.handle} | Community Profile | Topcoder`}</PageTitle>
+        <div className={styles.profileHeaderWrap}>
+            <ContentLayout
+                outerClass={styles.profileHeaderContentOuter}
+                contentClass={styles.profileHeaderContent}
+            >
+                <ProfileHeader
+                    profile={props.profile}
+                    authProfile={props.authProfile}
+                    refreshProfile={props.refreshProfile}
+                />
+            </ContentLayout>
+            <div className={styles.profileHeaderBottom} />
+        </div>
 
-            <div className={styles.profileHeaderWrap}>
-                <ContentLayout
-                    outerClass={styles.profileHeaderContentOuter}
-                    contentClass={styles.profileHeaderContent}
-                >
-                    <ProfileHeader
+        <ContentLayout
+            outerClass={styles.profileOuter}
+        >
+            <div className={styles.profileInfoWrap}>
+                <div className={styles.profileInfoLeft}>
+                    <AboutMe
                         profile={props.profile}
                         authProfile={props.authProfile}
                         refreshProfile={props.refreshProfile}
                     />
-                </ContentLayout>
-                <div className={styles.profileHeaderBottom} />
-            </div>
 
-            <ContentLayout
-                outerClass={styles.profileOuter}
-            >
-                <div className={styles.profileInfoWrap}>
-                    <div className={styles.profileInfoLeft}>
-                        {
-                            !isMobile && (
-                                <AboutMe
-                                    profile={props.profile}
-                                    authProfile={props.authProfile}
-                                    refreshProfile={props.refreshProfile}
-                                />
-                            )
-                        }
-
-                        <MemberLanguages profile={props.profile} authProfile={props.authProfile} />
+                    <MemberLanguages profile={props.profile} authProfile={props.authProfile} />
 
-                        <MemberLinks profile={props.profile} authProfile={props.authProfile} />
-
-                        <MemberLocalInfo
-                            profile={props.profile}
-                            authProfile={props.authProfile}
-                            refreshProfile={props.refreshProfile}
-                        />
-                    </div>
-                    <div className={styles.profileInfoRight}>
-                        {
-                            isMobile && (
-                                <AboutMe
-                                    profile={props.profile}
-                                    authProfile={props.authProfile}
-                                    refreshProfile={props.refreshProfile}
-                                />
-                            )
-                        }
+                    <MemberLinks profile={props.profile} authProfile={props.authProfile} />
 
-                        <div className={styles.sectionWrap}>
-                            <div className={styles.skillsWrap}>
-                                <MemberSkillsInfo
-                                    profile={props.profile}
-                                    authProfile={props.authProfile}
-                                    refreshProfile={props.refreshProfile}
-                                />
-                            </div>
+                    <MemberLocalInfo
+                        profile={props.profile}
+                        authProfile={props.authProfile}
+                        refreshProfile={props.refreshProfile}
+                    />
+                </div>
+                <div className={styles.profileInfoRight}>
+                    <div className={styles.sectionWrap}>
+                        <div className={styles.skillsWrap}>
+                            <MemberSkillsInfo
+                                profile={props.profile}
+                                authProfile={props.authProfile}
+                                refreshProfile={props.refreshProfile}
+                            />
                         </div>
+                    </div>
 
-                        <MemberTCAchievements profile={props.profile} />
+                    <MemberTCAchievements profile={props.profile} />
 
-                        <div className={styles.expirenceWrap}>
-                            <div>
-                                <div className={styles.sectionWrap}>
-                                    <WorkExpirence
-                                        profile={props.profile}
-                                        authProfile={props.authProfile}
-                                    />
-                                </div>
-                            </div>
+                    <div className={styles.expirenceWrap}>
+                        <div>
                             <div className={styles.sectionWrap}>
-                                <EducationAndCertifications
+                                <WorkExpirence
                                     profile={props.profile}
                                     authProfile={props.authProfile}
                                 />
                             </div>
                         </div>
+                        <div className={styles.sectionWrap}>
+                            <EducationAndCertifications
+                                profile={props.profile}
+                                authProfile={props.authProfile}
+                            />
+                        </div>
                     </div>
                 </div>
+            </div>
 
-                {/* <MemberTCActivityInfo profile={props.profile} /> */}
+            {/* <MemberTCActivityInfo profile={props.profile} /> */}
 
-            </ContentLayout>
+        </ContentLayout>
 
-            <OnboardingCompleted authProfile={props.authProfile} />
+        <OnboardingCompleted authProfile={props.authProfile} />
 
-        </div>
-    )
-}
+    </div>
+)
 
 export default ProfilePageLayout
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 7a464efa8..06539f8aa 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
@@ -2,21 +2,38 @@
 
 .container {
     display: flex;
-    flex-wrap: wrap;
     align-items: flex-start;
     justify-content: space-between;
     color: $tc-white;
+    position: relative;
+
+    @include ltelg {
+        padding-bottom: 150px;
+        flex-direction: column;
+    }
 
     .photoWrap {
         position: relative;
         margin-right: 60px;
 
+        @include ltelg {
+            margin: auto;
+            position: absolute;
+            bottom: -125px;
+            left: calc(50% - 125px);
+        }
+
         .profilePhoto {
             width: 300px;
             height: 300px;
             border: 12px solid $tc-white;
             border-radius: 50%;
             background-color: $tc-white;
+
+            @include ltelg {
+                width: 250px;
+                height: 250px;
+            }
         }
 
         .addButton {
@@ -49,6 +66,11 @@
                 font-size: 40px;
                 font-weight: $font-weight-bold;
                 font-family: $font-barlow;
+
+                @include ltelg {
+                    font-size: 32px;
+                    line-height: 33px;
+                }
             }
 
             button {
@@ -60,6 +82,11 @@
             margin-top: $sp-2;
             font-size: 20px;
 
+            @include ltelg {
+                font-size: 16px;
+                margin-top: 0;
+            }
+
             span {
                 font-weight: $font-weight-bold;
             }
@@ -75,7 +102,11 @@
         color: $black-100;
         margin-top: $sp-8;
 
-        > span {
+        @include ltelg {
+            margin-top: $sp-4;
+        }
+
+        >span {
             margin-right: $sp-1;
         }
 
@@ -83,4 +114,4 @@
             margin-left: $sp-2;
         }
     }
-}
+}
\ 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 fe42d67b6..69427c4e3 100644
--- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
+++ b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
@@ -11,6 +11,7 @@ import {
     UserTraitIds,
     UserTraits,
 } from '~/libs/core'
+import { useCheckIsMobile } from '~/libs/shared'
 
 import { AddButton, EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
@@ -30,6 +31,8 @@ const DEFAULT_MEMBER_AVATAR: string
     = 'https://d1aahxkjiobka8.cloudfront.net/static-assets/images/ab4a084a9815ebb1cf8f7b451ce4c88f.svg'
 
 const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
+    const isMobile: boolean = useCheckIsMobile()
+
     const photoURL: string = props.profile.photoURL || DEFAULT_MEMBER_AVATAR
     const hasProfilePicture = !!props.profile.photoURL
 
@@ -108,8 +111,29 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
         }, 1000)
     }
 
-    return (
-        <div className={styles.container}>
+    function renderOpenForWork(): JSX.Element {
+        return (
+            <div className={styles.profileActions}>
+                <span>
+                    {canEdit ? 'I am' : `${props.profile.firstName} is`}
+                </span>
+                <OpenForGigs canEdit={canEdit} authProfile={props.authProfile} profile={props.profile} />
+                {/* Enable this with talent search app */}
+                {/* {
+                            !canEdit && (
+                                <Button
+                                    label={`Hire ${props.profile.firstName}`}
+                                    primary
+                                    onClick={handleHireMeClick}
+                                />
+                            )
+                        } */}
+            </div>
+        )
+    }
+
+    function renderMemberPhotoWrap(): JSX.Element {
+        return (
             <div className={styles.photoWrap}>
                 <img src={photoURL} alt='Topcoder - Member Profile Avatar' className={styles.profilePhoto} />
                 {canEdit && hasProfilePicture && (
@@ -126,6 +150,14 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
                     />
                 )}
             </div>
+        )
+    }
+
+    return (
+        <div className={styles.container}>
+            {
+                !isMobile ? renderMemberPhotoWrap() : undefined
+            }
 
             {!traitsLoading && (
                 <div className={styles.profileInfo}>
@@ -166,24 +198,11 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
             )}
 
             {
-                openForWork || canEdit ? (
-                    <div className={styles.profileActions}>
-                        <span>
-                            {canEdit ? 'I am' : `${props.profile.firstName} is`}
-                        </span>
-                        <OpenForGigs canEdit={canEdit} authProfile={props.authProfile} profile={props.profile} />
-                        {/* Enable this with talent search app */}
-                        {/* {
-                            !canEdit && (
-                                <Button
-                                    label={`Hire ${props.profile.firstName}`}
-                                    primary
-                                    onClick={handleHireMeClick}
-                                />
-                            )
-                        } */}
-                    </div>
-                ) : undefined
+                openForWork || canEdit ? renderOpenForWork() : undefined
+            }
+
+            {
+                isMobile ? renderMemberPhotoWrap() : undefined
             }
 
             {
diff --git a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss b/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss
index 980c932df..e1373ca5d 100644
--- a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss
+++ b/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss
@@ -7,6 +7,10 @@
     padding: $sp-6;
     flex: 1;
 
+    @include ltelg {
+        padding: $sp-4;
+    }
+
     >p {
         font-size: 20px;
     }
@@ -21,6 +25,14 @@
         color: $tc-white;
         padding: $sp-8;
 
+        @include ltelg {
+            padding: $sp-4;
+        }
+
+        :global(.body-large-bold) {
+            text-align: center;
+        }
+
         .wins {
             display: flex;
             flex-wrap: wrap;
diff --git a/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.module.scss b/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.module.scss
index 971f07d8e..565b2b9c4 100644
--- a/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.module.scss
+++ b/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.module.scss
@@ -8,12 +8,30 @@
     padding: $sp-8 $sp-8 $sp-2;
     border-radius: 16px;
 
+    @include ltelg {
+        padding: $sp-4;
+    }
+
+    >p {
+        text-align: left;
+    }
+
     .achievementsWrap {
         display: flex;
         margin: $sp-4 0 $sp-2;
 
+        @include ltelg {
+            flex-direction: column;
+
+        }
+
         > div:not(:last-child) {
             margin-right: $sp-8;
+
+            @include ltelg {
+                margin-right: 0;
+                margin-bottom: $sp-8;
+            }
         }
     }
 
diff --git a/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx b/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx
index d70d700c7..39d48610e 100644
--- a/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx
+++ b/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx
@@ -38,7 +38,7 @@ const MemberTCAchievements: FC<MemberTCAchievementsProps> = (props: MemberTCAchi
 
     return memberStats?.wins || tcoWins ? (
         <div className={styles.container}>
-            <h3>Achievements @ Topcoder</h3>
+            <p className='body-large-medium'>Achievements @ Topcoder</p>
 
             <div className={styles.achievementsWrap}>
                 {

From 6abc12d21abdf4df982d942a4ae9c5f55006827e Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Tue, 18 Jul 2023 15:30:50 +0300
Subject: [PATCH 2/2] MP-234 more mobile view fixes

---
 .../member-profile/about-me/AboutMe.module.scss  |  4 ----
 .../src/member-profile/about-me/AboutMe.tsx      |  2 +-
 .../community-awards/CommunityAwards.module.scss | 16 +++-------------
 .../community-awards/CommunityAwards.tsx         | 10 ++++++++--
 .../page-layout/ProfilePageLayout.module.scss    | 11 ++++++++---
 .../page-layout/ProfilePageLayout.tsx            |  1 +
 6 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss b/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss
index f60bef8a7..228f9b0de 100644
--- a/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss
+++ b/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss
@@ -8,10 +8,6 @@
         text-align: center;
     }
 
-    :global(.body-large) {
-        font-style: italic;
-    }
-
     .wizzardWrap {
         display: flex;
         align-items: center;
diff --git a/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx b/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx
index 89d906936..4df60f36f 100644
--- a/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx
+++ b/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx
@@ -77,7 +77,7 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
             <MemberRatingCard profile={props.profile} />
 
             <div className={classNames(styles.wizzardWrap, hasEmptyDescription && styles.emptyDesc)}>
-                <p className='body-large'>{memberTitleTrait?.profileSelfTitle}</p>
+                <p className='body-main-medium'>{memberTitleTrait?.profileSelfTitle}</p>
                 {canEdit && !hasEmptyDescription && (
                     <EditMemberPropertyBtn
                         onClick={handleEditClick}
diff --git a/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss b/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss
index f3e4df541..6d756d636 100644
--- a/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss
+++ b/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss
@@ -4,23 +4,12 @@
     display: flex;
     flex-direction: column;
     margin-top: $sp-8;
+    padding-bottom: $sp-4;
 
     .title {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
-        margin-bottom: $sp-10;
-
-        @include ltelg {
-            margin-bottom: $sp-4;
-        }
-
-        .viewAllLink {
-            text-transform: uppercase;
-            color: $turq-160;
-            font-weight: $font-weight-bold;
-            font-size: 14px;
-        }
     }
 
     .badges {
@@ -47,6 +36,7 @@
             @include ltelg {
                 padding-bottom: 0;
                 padding-left: $sp-2;
+                min-width: 100%;
             }
 
             &:hover {
diff --git a/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.tsx b/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.tsx
index 1577500d6..692e69906 100644
--- a/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.tsx
+++ b/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import { bind } from 'lodash'
 
 import { useMemberBadges, UserBadge, UserBadgesResponse, UserProfile } from '~/libs/core'
+import { Button } from '~/libs/ui'
 
 import { MemberBadgeModal } from '../../components'
 
@@ -29,8 +30,13 @@ const CommunityAwards: FC<CommunityAwardsProps> = (props: CommunityAwardsProps)
     return memberBadges && memberBadges.count ? (
         <div className={styles.container}>
             <div className={styles.title}>
-                <h4>Community Awards & Honors</h4>
-                <Link to='badges' className={styles.viewAllLink}>View all badges</Link>
+                <Link to='badges'>
+                    <Button
+                        label='View all badges'
+                        link
+                        variant='linkblue'
+                    />
+                </Link>
             </div>
 
             <div className={styles.badges}>
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 40728ea6f..1cfea6b61 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
@@ -40,6 +40,10 @@
     .profileOuter {
         margin-top: 130px;
 
+        .profileInner {
+            width: 100%;
+        }
+
         .profileInfoWrap {
             display: grid;
             grid-template-columns: 300px 1fr;
@@ -47,8 +51,8 @@
             margin-bottom: $sp-13;
 
             @include ltelg {
-                grid-template-columns: 1fr;
-                gap: 0;
+                display: flex;
+                flex-direction: column;
             }
 
             .profileInfoLeft {
@@ -71,6 +75,7 @@
                 display: flex;
                 flex-direction: column;
                 margin-top: -275px;
+                z-index: 1;
 
                 @include ltelg {
                     margin-top: $sp-8;
@@ -107,7 +112,7 @@
 
 .sectionWrap {
     background-color: $tc-white;
-    padding: $sp-8 $sp-8 0;
+    padding: $sp-8 $sp-8 $sp-4;
     margin-bottom: $sp-8;
     border-radius: 16px;
 
diff --git a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx
index 262ee9025..017340fda 100644
--- a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx
+++ b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx
@@ -44,6 +44,7 @@ const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutP
 
         <ContentLayout
             outerClass={styles.profileOuter}
+            innerClass={styles.profileInner}
         >
             <div className={styles.profileInfoWrap}>
                 <div className={styles.profileInfoLeft}>