From 2e4a364d9e95f6d82811b7d1dc839554cfd29271 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Wed, 18 Oct 2023 12:41:15 -0600
Subject: [PATCH 01/21] Update profile page layout

Changelog: changed
---
 .../pages/users/activity_calendar.js          |   2 +-
 .../javascripts/pages/users/user_tabs.js      |   4 +-
 .../profile/components/user_achievements.vue  |   2 +-
 .../stylesheets/page_bundles/profile.scss     | 214 +++++++-------
 app/views/users/_follow_user.html.haml        |   4 +-
 app/views/users/_overview.html.haml           |  34 ++-
 app/views/users/_profile_basic_info.html.haml |   6 -
 app/views/users/_view_gpg_keys.html.haml      |   1 +
 .../users/_view_user_in_admin_area.html.haml  |   1 +
 app/views/users/show.html.haml                | 266 +++++++++++++++---
 locale/gitlab.pot                             |  12 +
 11 files changed, 385 insertions(+), 161 deletions(-)
 delete mode 100644 app/views/users/_profile_basic_info.html.haml

diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 13bba06d425bbf..1bd3c25a89a4a1 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -72,7 +72,7 @@ export default class ActivityCalendar {
     this.clickDay = this.clickDay.bind(this);
     this.currentSelectedDate = '';
     this.daySpace = 1;
-    this.daySize = 15;
+    this.daySize = 13;
     this.daySizeWithSpace = this.daySize + this.daySpace * 2;
     this.monthNames = [
       __('Jan'),
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 79eb3902116f36..a2df8be1bb7015 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -71,7 +71,7 @@ const CALENDAR_TEMPLATE = `
   </div>
 `;
 
-const CALENDAR_PERIOD_6_MONTHS = 6;
+// const CALENDAR_PERIOD_6_MONTHS = 6;
 const CALENDAR_PERIOD_12_MONTHS = 12;
 /* computation based on
  * width = (group + 1) * this.daySizeWithSpace + this.getExtraWidthPadding(group);
@@ -286,7 +286,7 @@ export default class UserTabs {
   static getVisibleCalendarPeriod($calendarWrap) {
     const width = $calendarWrap.width();
     return width < OVERVIEW_CALENDAR_BREAKPOINT
-      ? CALENDAR_PERIOD_6_MONTHS
+      ? CALENDAR_PERIOD_12_MONTHS
       : CALENDAR_PERIOD_12_MONTHS;
   }
 }
diff --git a/app/assets/javascripts/profile/components/user_achievements.vue b/app/assets/javascripts/profile/components/user_achievements.vue
index 7ce6b61c4aca7c..75ab11c9c9c1e0 100644
--- a/app/assets/javascripts/profile/components/user_achievements.vue
+++ b/app/assets/javascripts/profile/components/user_achievements.vue
@@ -72,7 +72,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-mb-3">
+  <div>
     <div
       v-for="userAchievement in userAchievements"
       :key="userAchievement.id"
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index 2c08db048fd28a..f6a866b9cabc72 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -29,15 +29,15 @@
   }
 }
 
-.calendar-block {
-  padding-left: 0;
-  padding-right: 0;
-  border-top: 0;
+// .calendar-block {
+//   padding-left: 0;
+//   padding-right: 0;
+//   border-top: 0;
 
-  @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-    overflow-x: auto;
-  }
-}
+//   @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
+//     overflow-x: auto;
+//   }
+// }
 
 .calendar-hint {
   font-size: 12px;
@@ -46,84 +46,92 @@
   float: right;
 }
 
-.cover-block {
-  text-align: center;
-  background: var(--gray-50, $gray-light);
-  padding-top: 44px;
-  position: relative;
-
-  .avatar-holder {
-    .avatar,
-    .identicon {
-      margin: 0 auto;
-      float: none;
-    }
-
-    .identicon {
-      border-radius: 50%;
-    }
-  }
-
-  .cover-title {
-    color: var(--gl-text-color, $gl-text-color);
-    font-size: 23px;
-
-    h1 {
-      color: var(--gl-text-color, $gl-text-color);
-      margin-bottom: 6px;
-      font-size: 23px;
-    }
-
-    .visibility-icon {
-      display: inline-block;
-      margin-left: 5px;
-      font-size: 18px;
-      color: color('gray');
-    }
-
-    p {
-      padding: 0 $gl-padding;
-      color: var(--gl-text-color, $gl-text-color);
-    }
-  }
-
-  .cover-controls {
-    @include media-breakpoint-up(sm) {
-      position: absolute;
-      top: 1rem;
-      right: 1.25rem;
-    }
-
-    &.left {
-      @include media-breakpoint-up(sm) {
-        left: 1.25rem;
-        right: auto;
-      }
-    }
-  }
-
-  &.user-cover-block {
-    padding: 24px 0 0;
-
-    .nav-links {
-      width: 100%;
-      float: none;
-
-      &.scrolling-tabs {
-        float: none;
-      }
-    }
-
-    li:first-child {
-      margin-left: auto;
-    }
-
-    li:last-child {
-      margin-right: auto;
-    }
+.user-profile-image {
+  .gl-avatar {
+    height: 12rem;
+    width: 12rem;
+    border-radius: 48px;
   }
 }
 
+// .cover-block {
+//   text-align: center;
+//   background: var(--gray-50, $gray-light);
+//   padding-top: 44px;
+//   position: relative;
+
+//   .avatar-holder {
+//     .avatar,
+//     .identicon {
+//       margin: 0 auto;
+//       float: none;
+//     }
+
+//     .identicon {
+//       border-radius: 50%;
+//     }
+//   }
+
+//   .cover-title {
+//     color: var(--gl-text-color, $gl-text-color);
+//     font-size: 23px;
+
+//     h1 {
+//       color: var(--gl-text-color, $gl-text-color);
+//       margin-bottom: 6px;
+//       font-size: 23px;
+//     }
+
+//     .visibility-icon {
+//       display: inline-block;
+//       margin-left: 5px;
+//       font-size: 18px;
+//       color: color('gray');
+//     }
+
+//     p {
+//       padding: 0 $gl-padding;
+//       color: var(--gl-text-color, $gl-text-color);
+//     }
+//   }
+
+//   .cover-controls {
+//     @include media-breakpoint-up(sm) {
+//       position: absolute;
+//       top: 1rem;
+//       right: 1.25rem;
+//     }
+
+//     &.left {
+//       @include media-breakpoint-up(sm) {
+//         left: 1.25rem;
+//         right: auto;
+//       }
+//     }
+//   }
+
+//   &.user-cover-block {
+//     padding: 24px 0 0;
+
+//     .nav-links {
+//       width: 100%;
+//       float: none;
+
+//       &.scrolling-tabs {
+//         float: none;
+//       }
+//     }
+
+//     li:first-child {
+//       margin-left: auto;
+//     }
+
+//     li:last-child {
+//       margin-right: auto;
+//     }
+//   }
+// }
+
 // Middle dot divider between each element in a list of items.
 .middle-dot-divider {
   @include middle-dot-divider;
@@ -140,14 +148,14 @@
   max-width: 600px;
 }
 
-.user-calendar {
-  text-align: center;
-  min-height: 172px;
+// .user-calendar {
+//   text-align: center;
+//   min-height: 172px;
 
-  .calendar {
-    display: inline-block;
-  }
-}
+//   .calendar {
+//     display: inline-block;
+//   }
+// }
 
 .user-calendar-activities {
   direction: ltr;
@@ -158,22 +166,22 @@
 }
 
 .user-contrib-text {
-  font-size: 12px;
+  font-size: 11px;
   fill: $calendar-user-contrib-text;
 }
 
 .user-profile {
-  .profile-header {
-    margin: 0 $gl-padding;
+  // .profile-header {
+  //   margin: 0 $gl-padding;
 
-    &.with-no-profile-tabs {
-      margin-bottom: $gl-padding-24;
-    }
+  //   &.with-no-profile-tabs {
+  //     margin-bottom: $gl-padding-24;
+  //   }
 
-    .avatar-holder {
-      margin: 0 auto 10px;
-    }
-  }
+  //   .avatar-holder {
+  //     margin: 0 auto 10px;
+  //   }
+  // }
 
   .user-profile-nav {
     font-size: 0;
@@ -208,9 +216,9 @@
   }
 
   @include media-breakpoint-down(xs) {
-    .cover-block {
-      padding-top: 20px;
-    }
+    // .cover-block {
+    //   padding-top: 20px;
+    // }
 
     .user-profile-nav {
       a {
diff --git a/app/views/users/_follow_user.html.haml b/app/views/users/_follow_user.html.haml
index 71f8a462cbf7bf..67b6a35d16377d 100644
--- a/app/views/users/_follow_user.html.haml
+++ b/app/views/users/_follow_user.html.haml
@@ -3,9 +3,9 @@
 - if current_user&.following_users_allowed?(@user)
   - if current_user.following?(@user)
     = form_tag user_unfollow_path(@user, :json), class: link_classes do
-      = render Pajamas::ButtonComponent.new(type: :submit, button_options: { class: 'gl-w-full', data: { track_action: 'click_button', track_label: 'unfollow_from_profile' } }) do
+      = render Pajamas::ButtonComponent.new(type: :submit, size: :small, button_options: { class: 'gl-w-full', data: { track_action: 'click_button', track_label: 'unfollow_from_profile' } }) do
         = _('Unfollow')
   - else
     = form_tag user_follow_path(@user, :json), class: link_classes do
-      = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { class: 'gl-w-full', data: { testid: 'follow-user-link', track_action: 'click_button', track_label: 'follow_from_profile' } }) do
+      = render Pajamas::ButtonComponent.new(variant: :confirm, size: :small, type: :submit, button_options: { class: 'gl-w-full', data: { testid: 'follow-user-link', track_action: 'click_button', track_label: 'follow_from_profile' } }) do
         = _('Follow')
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 597e7c37388590..7e6b781bb257d0 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -1,7 +1,12 @@
 - activity_pane_class = Feature.enabled?(:security_auto_fix) && @user.bot? ? "col-12" : "col-md-12 col-lg-6 gl-align-self-start"
 
-.row.d-none.d-sm-flex
-  .col-12.calendar-block.gl-my-3
+
+- if can?(current_user, :read_cross_project)
+  .activities-block
+    .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid.gl-mb-4
+      %h4.gl-flex-grow-1
+        = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
+      = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
     .user-calendar.light{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: local_timezone_instance(@user.timezone).now.utc_offset } }
       = gl_loading_icon(size: 'md', css_class: 'gl-my-8')
       .user-calendar-error.invisible
@@ -36,13 +41,18 @@
           .overview-content-list.user-activity-content{ data: { href: user_activity_path, testid: 'user-activity-content' } }
             = gl_loading_icon(size: 'md', css_class: 'loading')
 
-  - unless Feature.enabled?(:security_auto_fix) && @user.bot?
-    .col-md-12.col-lg-6
-      .projects-block
-        .gl-mt-5
-          .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid
-            %h4.gl-flex-grow-1
-              = s_('UserProfile|Personal projects')
-            = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
-          .overview-content-list{ data: { href: user_projects_path } }
-            = gl_loading_icon(size: 'md', css_class: 'loading')
+    .user-calendar-activities
+    .overview-content-list{ data: { href: user_activity_path, testid: 'user-activity-content' } }
+      = gl_loading_icon(size: 'md', css_class: 'loading')
+
+
+
+- unless Feature.enabled?(:security_auto_fix) && @user.bot?
+  .projects-block
+    .gl-mt-5
+      .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid
+        %h4.gl-flex-grow-1
+          = s_('UserProfile|Personal projects')
+        = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
+      .overview-content-list{ data: { href: user_projects_path } }
+        = gl_loading_icon(size: 'md', css_class: 'loading')
diff --git a/app/views/users/_profile_basic_info.html.haml b/app/views/users/_profile_basic_info.html.haml
deleted file mode 100644
index 7dd131dbe2c7da..00000000000000
--- a/app/views/users/_profile_basic_info.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-.gl-text-gray-900
-  = render 'middle_dot_divider', stacking: true do
-    @#{@user.username}
-  - if can?(current_user, :read_user_profile, @user)
-    = render 'middle_dot_divider', stacking: true do
-      = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
diff --git a/app/views/users/_view_gpg_keys.html.haml b/app/views/users/_view_gpg_keys.html.haml
index aa0f69ffe3ce60..fcdc7cd75121b5 100644
--- a/app/views/users/_view_gpg_keys.html.haml
+++ b/app/views/users/_view_gpg_keys.html.haml
@@ -1,5 +1,6 @@
 - verified_gpg_keys = @user.gpg_keys.select(&:verified?)
 - if verified_gpg_keys.any?
   = render Pajamas::ButtonComponent.new(href: user_gpg_keys_path,
+    size: :small,
     icon: 'key',
     button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: n_('View public GPG key', 'View public GPG keys', verified_gpg_keys.length), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
diff --git a/app/views/users/_view_user_in_admin_area.html.haml b/app/views/users/_view_user_in_admin_area.html.haml
index 36b3c33d8ab362..0c39015dd07a86 100644
--- a/app/views/users/_view_user_in_admin_area.html.haml
+++ b/app/views/users/_view_user_in_admin_area.html.haml
@@ -1,4 +1,5 @@
 - if current_user && current_user.admin?
   = render Pajamas::ButtonComponent.new(href: [:admin, @user],
+    size: :small,
     icon: 'user',
     button_options: { class: 'gl-flex-grow-1 has-tooltip', title: s_('UserProfile|View user in admin area'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } })
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index e23555428aa272..fbcde3003c9b0a 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -165,11 +165,9 @@
     - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
       #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
   %div{ class: container_class }
-    - unless Feature.enabled?(:profile_tabs_vue, current_user)
-      .tab-content
-        - if profile_tab?(:overview)
-          #js-overview.tab-pane
-            = render "users/overview"
+    .row
+      .col-12.col-md-4
+        .profile-header{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
 
         - if profile_tab?(:activity)
           #activity.tab-pane
@@ -187,39 +185,239 @@
             #groups.tab-pane
               -# This tab is always loaded via AJAX
 
-          - if profile_tab?(:contributed)
-            #contributed.tab-pane
-              -# This tab is always loaded via AJAX
 
-          - if profile_tab?(:projects)
-            #projects.tab-pane
-              -# This tab is always loaded via AJAX
+          = link_to avatar_icon_for_user(@user, 400, current_user: current_user), class: "user-profile-image", target: '_blank', rel: 'noopener noreferrer' do
+            = render Pajamas::AvatarComponent.new(@user, alt: "", size: 96, avatar_options: { itemprop: "image" })
 
-          - if profile_tab?(:starred)
-            #starred.tab-pane
-              -# This tab is always loaded via AJAX
 
-          - if profile_tab?(:snippets)
-            #snippets.tab-pane
-              -# This tab is always loaded via AJAX
 
-          - if profile_tab?(:followers)
-            #followers.tab-pane
-              -# This tab is always loaded via AJAX
 
-          - if profile_tab?(:following)
-            #following.tab-pane
-              -# This tab is always loaded via AJAX
 
-      .loading.hide
-        .gl-spinner.gl-spinner-md
 
-    - if profile_tabs.empty?
-      .svg-content
-        = image_tag 'illustrations/profile_private_mode.svg'
-      .text-content.text-center
-        %h4
-          - if @user.blocked?
-            = s_('UserProfile|This user is blocked')
-          - else
-            = s_('UserProfile|This user has a private profile')
+
+          .gl-display-inline-block.gl-vertical-align-top.gl-text-left.gl-max-w-80
+            - if @user.blocked? || !@user.confirmed?
+              .user-info
+                %h1.gl-font-size-h1.gl-line-height-1
+                  %div= user_display_name(@user)
+                - if can?(current_user, :read_user_profile, @user)
+                  .gl-text-gray-600.gl-font-weight-normal.gl-display-inline-block
+                    @#{@user.username}
+
+            - else
+              .user-info
+                %h1.gl-font-size-h1.gl-line-height-1{ itemprop: 'name' }
+                  %div= @user.name
+                  - if can?(current_user, :read_user_profile, @user)
+                    .gl-text-gray-600.gl-font-weight-normal.gl-display-inline-block
+                      @#{@user.username}
+                  - if @user.status&.busy?
+                    = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
+
+                - if @user.pronouns.present?
+                  .gl-font-base.gl-text-gray-500.gl-vertical-align-middle.gl-font-weight-normal
+                    = s_("UserProfile|Pronouns: %{pronouns}") % { pronouns: @user.pronouns }
+                - if @user.pronunciation.present?
+                  .gl-align-items-center
+                    %p.gl-mb-4.gl-text-gray-500= s_("UserProfile|Pronounced as: %{pronunciation}") % { pronunciation: @user.pronunciation }
+
+                - if @user.status&.customized?
+                  .cover-status.gl-display-inline-flex.gl-align-items-baseline.gl-px-4.gl-py-3.gl-border.gl-bg-gray-10.gl-rounded-6.gl-font-sm
+                    = emoji_icon(@user.status.emoji, class: 'gl-mr-3')
+                    = markdown_field(@user.status, :message)
+
+
+
+
+                .gl-py-5
+                  .gl-font-weight-bold.gl-mb-3= s_('Info')
+                  - user_local_time = local_time(@user.timezone)
+                  .gl-text-gray-900
+                    = sprite_icon('calendar', css_class: 'fgray')
+                    = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
+                  - if @user.location.present? || user_local_time.present? || work_information(@user).present?
+                    .gl-text-gray-900
+                      - if @user.location.present?
+                        %div
+                          = sprite_icon('location', css_class: 'fgray')
+                          %span{ itemprop: 'addressLocality' }
+                            = @user.location
+                      - if user_local_time.present?
+                        %div
+                          = sprite_icon('clock', css_class: 'fgray')
+                          %span
+                            = user_local_time
+                      - if work_information(@user).present?
+                        %div
+                          = sprite_icon('work', css_class: 'fgray')
+                          %span
+                            = work_information(@user, with_schema_markup: true)
+
+                .gl-pb-5
+                  .gl-font-weight-bold.gl-mb-3= s_('Contact')
+                  .gl-text-gray-900
+                    - if @user.skype.present?
+                      = link_to "skype:#{@user.skype}", class: 'gl-hover-text-decoration-none', title: "Skype" do
+                        = sprite_icon('skype', css_class: 'skype-icon')
+                    - if @user.linkedin.present?
+                      = link_to linkedin_url(@user), class: 'gl-hover-text-decoration-none', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow' do
+                        = sprite_icon('linkedin', css_class: 'linkedin-icon')
+                    - if @user.twitter.present?
+                      = link_to twitter_url(@user), class: 'gl-hover-text-decoration-none', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow' do
+                        = sprite_icon('twitter', css_class: 'twitter-icon')
+                    - if @user.discord.present?
+                      = link_to discord_url(@user), class: 'gl-hover-text-decoration-none', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow' do
+                        = sprite_icon('discord', css_class: 'discord-icon')
+                    - if Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?
+                      = link_to mastodon_url(@user), class: 'gl-hover-text-decoration-none', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow' do
+                        = sprite_icon('mastodon', css_class: 'mastodon-icon')
+                    - if @user.website_url.present?
+                      %div
+                        - if Feature.enabled?(:security_auto_fix) && @user.bot?
+                          = sprite_icon('question-o', css_class: 'gl-text-blue-500')
+                        = sprite_icon('earth', css_class: 'fgray')
+                        = link_to @user.short_website_url, @user.full_website_url, target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
+                    - if display_public_email?(@user)
+                      %div
+                        = sprite_icon('mail', css_class: 'fgray')
+                        = link_to @user.public_email, "mailto:#{@user.public_email}", itemprop: 'email'
+
+                -# Ensure this stays indented one level less than the social links
+                -# See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/118314
+                - if @user.bio.present? && @user.confirmed? && !@user.blocked?
+                  .gl-pb-5
+                    .gl-font-weight-bold.gl-mb-3= s_('Bio')
+                    .profile-user-bio
+                      = @user.bio
+
+                .gl-pb-5
+                  .gl-font-weight-bold.gl-mb-3= s_('Achievements')
+                  - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
+                    #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
+
+                .cover-controls
+                  = render 'users/follow_user'
+                  -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
+                  - if @user == current_user
+                    = render Pajamas::ButtonComponent.new(href: profile_path, size: :small,
+                      button_options: { class: 'gl-flex-grow-1', title: s_('UserProfile|Edit profile') }) do
+                      = s_("UserProfile|Edit profile")
+                  = render 'users/view_gpg_keys'
+                  = render 'users/view_user_in_admin_area'
+                  .js-user-profile-actions{ data: user_profile_actions_data(@user) }
+
+
+
+
+
+
+
+        - if !profile_tabs.empty? && !Feature.enabled?(:profile_tabs_vue, current_user)
+          .scrolling-tabs-container{ class: [('gl-display-none' if show_super_sidebar?)] }
+            %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+              = sprite_icon('chevron-lg-left', size: 12)
+            %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+              = sprite_icon('chevron-lg-right', size: 12)
+            %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs.gl-border-b-0
+              - if profile_tab?(:overview)
+                %li.js-overview-tab
+                  = link_to user_path, data: { target: 'div#js-overview', action: 'overview', toggle: 'tab' } do
+                    = s_('UserProfile|Overview')
+              - if profile_tab?(:activity)
+                %li.js-activity-tab
+                  = link_to user_activity_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
+                    = s_('UserProfile|Activity')
+              - unless Feature.enabled?(:security_auto_fix) && @user.bot?
+                - if profile_tab?(:groups)
+                  %li.js-groups-tab
+                    = link_to user_groups_path, data: { target: 'div#groups', action: 'groups', toggle: 'tab', endpoint: user_groups_path(format: :json) } do
+                      = s_('UserProfile|Groups')
+                - if profile_tab?(:contributed)
+                  %li.js-contributed-tab
+                    = link_to user_contributed_projects_path, data: { target: 'div#contributed', action: 'contributed', toggle: 'tab', endpoint: user_contributed_projects_path(format: :json) } do
+                      = s_('UserProfile|Contributed projects')
+                - if profile_tab?(:projects)
+                  %li.js-projects-tab
+                    = link_to user_projects_path, data: { target: 'div#projects', action: 'projects', toggle: 'tab', endpoint: user_projects_path(format: :json) } do
+                      = s_('UserProfile|Personal projects')
+                - if profile_tab?(:starred)
+                  %li.js-starred-tab
+                    = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json) } do
+                      = s_('UserProfile|Starred projects')
+                - if profile_tab?(:snippets)
+                  %li.js-snippets-tab
+                    = link_to user_snippets_path, data: { target: 'div#snippets', action: 'snippets', toggle: 'tab', endpoint: user_snippets_path(format: :json) } do
+                      = s_('UserProfile|Snippets')
+                - if profile_tab?(:followers)
+                  %li.js-followers-tab
+                    = link_to user_followers_path, data: { target: 'div#followers', action: 'followers', toggle: 'tab', endpoint: user_followers_path(format: :json) } do
+                      = s_('UserProfile|Followers')
+                      = gl_badge_tag @user.followers.count, size: :sm
+                - if profile_tab?(:following)
+                  %li.js-following-tab
+                    = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json), qa_selector: 'following_tab' } do
+                      = s_('UserProfile|Following')
+                      = gl_badge_tag @user.followees.count, size: :sm
+        - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
+          #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
+
+
+
+
+      .col-12.col-md-8
+        - unless Feature.enabled?(:profile_tabs_vue, current_user)
+          .tab-content
+            - if profile_tab?(:overview)
+              #js-overview.tab-pane
+                = render "users/overview"
+
+            - if profile_tab?(:activity)
+              #activity.tab-pane
+                .flash-container
+                - if can?(current_user, :read_cross_project)
+                  %h4.prepend-top-20
+                    = s_('UserProfile|Most Recent Activity')
+                  .content_list{ data: { href: user_activity_path } }
+                  .loading
+                    = gl_loading_icon(size: 'md')
+            - unless @user.bot?
+              - if profile_tab?(:groups)
+                #groups.tab-pane
+                  -# This tab is always loaded via AJAX
+
+              - if profile_tab?(:contributed)
+                #contributed.tab-pane
+                  -# This tab is always loaded via AJAX
+
+              - if profile_tab?(:projects)
+                #projects.tab-pane
+                  -# This tab is always loaded via AJAX
+
+              - if profile_tab?(:starred)
+                #starred.tab-pane
+                  -# This tab is always loaded via AJAX
+
+              - if profile_tab?(:snippets)
+                #snippets.tab-pane
+                  -# This tab is always loaded via AJAX
+
+              - if profile_tab?(:followers)
+                #followers.tab-pane
+                  -# This tab is always loaded via AJAX
+
+              - if profile_tab?(:following)
+                #following.tab-pane
+                  -# This tab is always loaded via AJAX
+
+          .loading.hide
+            .gl-spinner.gl-spinner-md
+
+        - if profile_tabs.empty?
+          .svg-content
+            = image_tag 'illustrations/profile_private_mode.svg'
+          .text-content.text-center
+            %h4
+              - if @user.blocked?
+                = s_('UserProfile|This user is blocked')
+              - else
+                = s_('UserProfile|This user has a private profile')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7a488a1cdb9702..db992821bcce29 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8120,6 +8120,9 @@ msgstr ""
 msgid "Billing|Your group recently changed to use the Free plan. %{over_limit_message} You can free up space for new members by removing those who no longer need access or toggling them to over-limit. To get an unlimited number of members, you can %{link_start}upgrade%{link_end} to a paid tier."
 msgstr ""
 
+msgid "Bio"
+msgstr ""
+
 msgid "Bitbucket Server Import"
 msgstr ""
 
@@ -12991,6 +12994,9 @@ msgstr ""
 msgid "Consistency guarantee method"
 msgstr ""
 
+msgid "Contact"
+msgstr ""
+
 msgid "Contact sales"
 msgstr ""
 
@@ -25333,6 +25339,9 @@ msgstr ""
 msgid "Indicates whether this runner can pick jobs without tags"
 msgstr ""
 
+msgid "Info"
+msgstr ""
+
 msgid "Inform users without uploaded SSH keys that they can't push over SSH until one is added"
 msgstr ""
 
@@ -52302,6 +52311,9 @@ msgstr ""
 msgid "UserProfile|Pronounced as: %{pronunciation}"
 msgstr ""
 
+msgid "UserProfile|Pronouns: %{pronouns}"
+msgstr ""
+
 msgid "UserProfile|Retry"
 msgstr ""
 
-- 
GitLab


From 3bbe0aed51c3aaaed0def9273ae901fa4a1fbe93 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Tue, 24 Oct 2023 12:30:33 +0200
Subject: [PATCH 02/21] Profile layout changes

- Resize user profile image to 120px
- Use separate lines for Name and username
- Move status up
- Add Pronouns and Pronounced block
- Move bio up
- Info block
- Content block
- Activity: Change to show username inline
- Activity: Use small font for updated date

Changelog: changed
---
 .../profile/components/activity_calendar.vue  |  12 +-
 .../profile/components/overview_tab.vue       |   6 +-
 .../profile/components/user_achievements.vue  |   3 +
 .../stylesheets/page_bundles/profile.scss     |   5 +-
 app/views/users/show.html.haml                | 320 +++++-------------
 locale/gitlab.pot                             |  18 +-
 6 files changed, 105 insertions(+), 259 deletions(-)

diff --git a/app/assets/javascripts/profile/components/activity_calendar.vue b/app/assets/javascripts/profile/components/activity_calendar.vue
index d359b478d35c05..90971cf0b02ce9 100644
--- a/app/assets/javascripts/profile/components/activity_calendar.vue
+++ b/app/assets/javascripts/profile/components/activity_calendar.vue
@@ -88,13 +88,11 @@ export default {
       :primary-button-text="$options.i18n.retry"
       @primaryAction="renderActivityCalendar"
     />
-    <div v-else class="gl-text-center">
-      <div class="gl-display-inline-block gl-relative">
-        <div ref="calendarSvgContainer"></div>
-        <p class="gl-absolute gl-right-0 gl-bottom-0 gl-mb-0 gl-font-sm">
-          {{ $options.i18n.calendarHint }}
-        </p>
-      </div>
+    <div v-else class="gl-display-inline-block gl-relative gl-w-full">
+      <div ref="calendarSvgContainer"></div>
+      <p class="gl-absolute gl-right-0 gl-bottom-0 gl-mb-0 gl-font-sm">
+        {{ $options.i18n.calendarHint }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/profile/components/overview_tab.vue b/app/assets/javascripts/profile/components/overview_tab.vue
index 8cfa3fb3eea188..3d622957a414b5 100644
--- a/app/assets/javascripts/profile/components/overview_tab.vue
+++ b/app/assets/javascripts/profile/components/overview_tab.vue
@@ -55,8 +55,8 @@ export default {
 <template>
   <gl-tab :title="$options.i18n.title">
     <activity-calendar />
-    <div class="gl-mx-n5 gl-display-flex gl-flex-wrap">
-      <div class="gl-px-5 gl-w-full gl-lg-w-half" data-testid="activity-section">
+    <div class="gl-mt-5 gl-display-flex gl-flex-wrap">
+      <div class="gl-w-full" data-testid="activity-section">
         <div
           class="gl-display-flex gl-align-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
         >
@@ -66,7 +66,7 @@ export default {
         <gl-loading-icon v-if="eventsLoading" class="gl-mt-5" size="md" />
         <contribution-events v-else :events="events" />
       </div>
-      <div class="gl-px-5 gl-w-full gl-lg-w-half" data-testid="personal-projects-section">
+      <div class="gl-w-full" data-testid="personal-projects-section">
         <div
           class="gl-display-flex gl-align-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
         >
diff --git a/app/assets/javascripts/profile/components/user_achievements.vue b/app/assets/javascripts/profile/components/user_achievements.vue
index 75ab11c9c9c1e0..4fecfda862ac22 100644
--- a/app/assets/javascripts/profile/components/user_achievements.vue
+++ b/app/assets/javascripts/profile/components/user_achievements.vue
@@ -73,6 +73,9 @@ export default {
 
 <template>
   <div>
+    <h3 v-if="userAchievements.length > 0" class="h5 gl-mb-2">
+      {{ s__('Achievements|Achievements') }}
+    </h3>
     <div
       v-for="userAchievement in userAchievements"
       :key="userAchievement.id"
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index f6a866b9cabc72..b060cf73671b1a 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -48,9 +48,8 @@
 
 .user-profile-image {
   .gl-avatar {
-    height: 12rem;
-    width: 12rem;
-    border-radius: 48px;
+    height: 7.5rem;
+    width: 7.5rem;
   }
 }
 
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index fbcde3003c9b0a..73e17e60d5c294 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -15,158 +15,9 @@
   = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")
 
 .user-profile
-  .cover-block.user-cover-block.gl-border-t.gl-border-b.gl-mt-n1
-    %div{ class: container_class }
-      .cover-controls.gl-display-flex.gl-gap-3.gl-pb-4
-        = render 'users/follow_user'
-        -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
-        - if @user == current_user
-          = render Pajamas::ButtonComponent.new(href: profile_path,
-            button_options: { class: 'gl-flex-grow-1', title: s_('UserProfile|Edit profile') }) do
-            = s_("UserProfile|Edit profile")
-        = render 'users/view_gpg_keys'
-        = render 'users/view_user_in_admin_area'
-        .js-user-profile-actions{ data: user_profile_actions_data(@user) }
-
-      .profile-header{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
-        .gl-display-inline-block.gl-mx-8.gl-vertical-align-top
-          .avatar-holder
-            = link_to avatar_icon_for_user(@user, 400, current_user: current_user), target: '_blank', rel: 'noopener noreferrer' do
-              = render Pajamas::AvatarComponent.new(@user, alt: "", size: 96, avatar_options: { itemprop: "image" })
-          - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
-            #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
-        .gl-display-inline-block.gl-vertical-align-top.gl-text-left.gl-max-w-80
-          - if @user.blocked? || !@user.confirmed?
-            .user-info
-              %h1.cover-title.gl-my-0
-                = user_display_name(@user)
-            = render "users/profile_basic_info"
-          - else
-            .user-info
-              %h1.cover-title.gl-my-0{ itemprop: 'name' }
-                = @user.name
-                - if @user.pronouns.present?
-                  %span.gl-font-base.gl-text-gray-500.gl-vertical-align-middle
-                    = "(#{@user.pronouns})"
-                - if @user.status&.busy?
-                  = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
-
-              - if @user.pronunciation.present?
-                .gl-align-items-center
-                  %p.gl-mb-4.gl-text-gray-500= s_("UserProfile|Pronounced as: %{pronunciation}") % { pronunciation: @user.pronunciation }
-
-              - if @user.status&.customized?
-                .cover-status.gl-display-inline-flex.gl-align-items-baseline.gl-mb-3
-                  = emoji_icon(@user.status.emoji, class: 'gl-mr-2')
-                  = markdown_field(@user.status, :message)
-              = render "users/profile_basic_info"
-              - user_local_time = local_time(@user.timezone)
-              - if @user.location.present? || user_local_time.present? || work_information(@user).present?
-                .gl-text-gray-900
-                  - if @user.location.present?
-                    = render 'middle_dot_divider', stacking: true, itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' do
-                      = sprite_icon('location', css_class: 'fgray')
-                      %span{ itemprop: 'addressLocality' }
-                        = @user.location
-                  - if user_local_time.present?
-                    = render 'middle_dot_divider', stacking: true, data: { testid: 'user-local-time' } do
-                      = sprite_icon('clock', css_class: 'fgray')
-                      %span
-                        = user_local_time
-                  - if work_information(@user).present?
-                    = render 'middle_dot_divider', stacking: true do
-                      = sprite_icon('work', css_class: 'fgray')
-                      %span
-                        = work_information(@user, with_schema_markup: true)
-              .gl-text-gray-900
-                - if @user.skype.present?
-                  = render 'middle_dot_divider' do
-                    = link_to "skype:#{@user.skype}", class: 'gl-hover-text-decoration-none', title: "Skype" do
-                      = sprite_icon('skype', css_class: 'skype-icon')
-                - if @user.linkedin.present?
-                  = render 'middle_dot_divider' do
-                    = link_to linkedin_url(@user), class: 'gl-hover-text-decoration-none', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                      = sprite_icon('linkedin', css_class: 'linkedin-icon')
-                - if @user.twitter.present?
-                  = render 'middle_dot_divider', breakpoint: 'sm' do
-                    = link_to twitter_url(@user), class: 'gl-hover-text-decoration-none', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                      = sprite_icon('twitter', css_class: 'twitter-icon')
-                - if @user.discord.present?
-                  = render 'middle_dot_divider', breakpoint: 'sm' do
-                    = link_to discord_url(@user), class: 'gl-hover-text-decoration-none', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                      = sprite_icon('discord', css_class: 'discord-icon')
-                - if Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?
-                  = render 'middle_dot_divider', breakpoint: 'sm' do
-                    = link_to mastodon_url(@user), class: 'gl-hover-text-decoration-none', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                      = sprite_icon('mastodon', css_class: 'mastodon-icon')
-                - if @user.website_url.present?
-                  = render 'middle_dot_divider', stacking: true do
-                    - if Feature.enabled?(:security_auto_fix) && @user.bot?
-                      = sprite_icon('question-o', css_class: 'gl-text-blue-500')
-                    = link_to @user.short_website_url, @user.full_website_url, target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
-                - if display_public_email?(@user)
-                  = render 'middle_dot_divider', stacking: true do
-                    = link_to @user.public_email, "mailto:#{@user.public_email}", itemprop: 'email'
-
-              -# Ensure this stays indented one level less than the social links
-              -# See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/118314
-              - if @user.bio.present? && @user.confirmed? && !@user.blocked?
-                %p.profile-user-bio.gl-mb-3
-                  = @user.bio
-
-      -# TODO: Remove this with the removal of the old navigation.
-      -# See https://gitlab.com/groups/gitlab-org/-/epics/11875.
-      - if !profile_tabs.empty? && !Feature.enabled?(:profile_tabs_vue, current_user)
-        .scrolling-tabs-container{ class: [('gl-display-none' if show_super_sidebar?)] }
-          %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
-            = sprite_icon('chevron-lg-left', size: 12)
-          %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
-            = sprite_icon('chevron-lg-right', size: 12)
-          %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs.gl-border-b-0
-            - if profile_tab?(:overview)
-              %li.js-overview-tab
-                = link_to user_path, data: { target: 'div#js-overview', action: 'overview', toggle: 'tab' } do
-                  = s_('UserProfile|Overview')
-            - if profile_tab?(:activity)
-              %li.js-activity-tab
-                = link_to user_activity_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
-                  = s_('UserProfile|Activity')
-            - unless Feature.enabled?(:security_auto_fix) && @user.bot?
-              - if profile_tab?(:groups)
-                %li.js-groups-tab
-                  = link_to user_groups_path, data: { target: 'div#groups', action: 'groups', toggle: 'tab', endpoint: user_groups_path(format: :json) } do
-                    = s_('UserProfile|Groups')
-              - if profile_tab?(:contributed)
-                %li.js-contributed-tab
-                  = link_to user_contributed_projects_path, data: { target: 'div#contributed', action: 'contributed', toggle: 'tab', endpoint: user_contributed_projects_path(format: :json) } do
-                    = s_('UserProfile|Contributed projects')
-              - if profile_tab?(:projects)
-                %li.js-projects-tab
-                  = link_to user_projects_path, data: { target: 'div#projects', action: 'projects', toggle: 'tab', endpoint: user_projects_path(format: :json) } do
-                    = s_('UserProfile|Personal projects')
-              - if profile_tab?(:starred)
-                %li.js-starred-tab
-                  = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json) } do
-                    = s_('UserProfile|Starred projects')
-              - if profile_tab?(:snippets)
-                %li.js-snippets-tab
-                  = link_to user_snippets_path, data: { target: 'div#snippets', action: 'snippets', toggle: 'tab', endpoint: user_snippets_path(format: :json) } do
-                    = s_('UserProfile|Snippets')
-              - if profile_tab?(:followers)
-                %li.js-followers-tab
-                  = link_to user_followers_path, data: { target: 'div#followers', action: 'followers', toggle: 'tab', endpoint: user_followers_path(format: :json) } do
-                    = s_('UserProfile|Followers')
-                    = gl_badge_tag @user.followers.count, size: :sm
-              - if profile_tab?(:following)
-                %li.js-following-tab
-                  = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json) } do
-                    = s_('UserProfile|Following')
-                    = gl_badge_tag @user.followees.count, size: :sm
-    - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
-      #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
   %div{ class: container_class }
     .row
-      .col-12.col-md-4
+      .col-12.col-md-4.gl-mt-5
         .profile-header{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
 
         - if profile_tab?(:activity)
@@ -185,117 +36,115 @@
             #groups.tab-pane
               -# This tab is always loaded via AJAX
 
-
           = link_to avatar_icon_for_user(@user, 400, current_user: current_user), class: "user-profile-image", target: '_blank', rel: 'noopener noreferrer' do
             = render Pajamas::AvatarComponent.new(@user, alt: "", size: 96, avatar_options: { itemprop: "image" })
 
 
-
-
-
-
-
           .gl-display-inline-block.gl-vertical-align-top.gl-text-left.gl-max-w-80
             - if @user.blocked? || !@user.confirmed?
               .user-info
-                %h1.gl-font-size-h1.gl-line-height-1
-                  %div= user_display_name(@user)
+                %h1.gl-font-size-h-display.gl-line-height-1
+                  %p.gl-mr-2.gl-mb-0
+                    = user_display_name(@user)
                 - if can?(current_user, :read_user_profile, @user)
-                  .gl-text-gray-600.gl-font-weight-normal.gl-display-inline-block
+                  %span.gl-text-gray-600.gl-font-weight-normal.gl-mt-0
                     @#{@user.username}
 
             - else
               .user-info
-                %h1.gl-font-size-h1.gl-line-height-1{ itemprop: 'name' }
-                  %div= @user.name
+                %h1.gl-font-size-h-display.gl-line-height-1{ itemprop: 'name' }
+                  %p.gl-mr-2.gl-mb-0
+                    = @user.name
                   - if can?(current_user, :read_user_profile, @user)
-                    .gl-text-gray-600.gl-font-weight-normal.gl-display-inline-block
+                    %span.gl-text-gray-600.gl-font-weight-normal.gl-mb-0
                       @#{@user.username}
                   - if @user.status&.busy?
                     = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
 
-                - if @user.pronouns.present?
-                  .gl-font-base.gl-text-gray-500.gl-vertical-align-middle.gl-font-weight-normal
-                    = s_("UserProfile|Pronouns: %{pronouns}") % { pronouns: @user.pronouns }
-                - if @user.pronunciation.present?
-                  .gl-align-items-center
-                    %p.gl-mb-4.gl-text-gray-500= s_("UserProfile|Pronounced as: %{pronunciation}") % { pronunciation: @user.pronunciation }
-
                 - if @user.status&.customized?
                   .cover-status.gl-display-inline-flex.gl-align-items-baseline.gl-px-4.gl-py-3.gl-border.gl-bg-gray-10.gl-rounded-6.gl-font-sm
                     = emoji_icon(@user.status.emoji, class: 'gl-mr-3')
                     = markdown_field(@user.status, :message)
 
+                - if @user.pronouns.present? || @user.pronunciation.present?
+                  .gl-mt-5
+                  - if @user.pronouns.present?
+                    .gl-align-items-center
+                      %p.gl-mb-4.gl-text-secondary{ class: 'gl-mb-0!' }
+                        = s_("UserProfile|Pronouns: %{pronouns}") % { pronouns: @user.pronouns }
 
-
-
-                .gl-py-5
-                  .gl-font-weight-bold.gl-mb-3= s_('Info')
-                  - user_local_time = local_time(@user.timezone)
-                  .gl-text-gray-900
-                    = sprite_icon('calendar', css_class: 'fgray')
-                    = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
-                  - if @user.location.present? || user_local_time.present? || work_information(@user).present?
-                    .gl-text-gray-900
-                      - if @user.location.present?
-                        %div
-                          = sprite_icon('location', css_class: 'fgray')
-                          %span{ itemprop: 'addressLocality' }
-                            = @user.location
-                      - if user_local_time.present?
-                        %div
-                          = sprite_icon('clock', css_class: 'fgray')
-                          %span
-                            = user_local_time
-                      - if work_information(@user).present?
-                        %div
-                          = sprite_icon('work', css_class: 'fgray')
-                          %span
-                            = work_information(@user, with_schema_markup: true)
-
-                .gl-pb-5
-                  .gl-font-weight-bold.gl-mb-3= s_('Contact')
-                  .gl-text-gray-900
-                    - if @user.skype.present?
-                      = link_to "skype:#{@user.skype}", class: 'gl-hover-text-decoration-none', title: "Skype" do
-                        = sprite_icon('skype', css_class: 'skype-icon')
-                    - if @user.linkedin.present?
-                      = link_to linkedin_url(@user), class: 'gl-hover-text-decoration-none', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                        = sprite_icon('linkedin', css_class: 'linkedin-icon')
-                    - if @user.twitter.present?
-                      = link_to twitter_url(@user), class: 'gl-hover-text-decoration-none', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                        = sprite_icon('twitter', css_class: 'twitter-icon')
-                    - if @user.discord.present?
-                      = link_to discord_url(@user), class: 'gl-hover-text-decoration-none', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                        = sprite_icon('discord', css_class: 'discord-icon')
-                    - if Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?
-                      = link_to mastodon_url(@user), class: 'gl-hover-text-decoration-none', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                        = sprite_icon('mastodon', css_class: 'mastodon-icon')
-                    - if @user.website_url.present?
-                      %div
-                        - if Feature.enabled?(:security_auto_fix) && @user.bot?
-                          = sprite_icon('question-o', css_class: 'gl-text-blue-500')
-                        = sprite_icon('earth', css_class: 'fgray')
-                        = link_to @user.short_website_url, @user.full_website_url, target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
-                    - if display_public_email?(@user)
-                      %div
-                        = sprite_icon('mail', css_class: 'fgray')
-                        = link_to @user.public_email, "mailto:#{@user.public_email}", itemprop: 'email'
+                  - if @user.pronunciation.present?
+                    .gl-align-items-center
+                      %p.gl-mb-4.gl-text-secondary
+                        = s_("UserProfile|Pronounced as: %{pronunciation}") % { pronunciation: @user.pronunciation }
 
                 -# Ensure this stays indented one level less than the social links
                 -# See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/118314
                 - if @user.bio.present? && @user.confirmed? && !@user.blocked?
-                  .gl-pb-5
-                    .gl-font-weight-bold.gl-mb-3= s_('Bio')
-                    .profile-user-bio
-                      = @user.bio
+                  %p.profile-user-bio.gl-mt-5
+                    = @user.bio
+
+
+                - user_local_time = local_time(@user.timezone)
+                - if @user.location.present? || user_local_time.present? || work_information(@user).present?
+                  .gl-mt-5
+                    %h3.h5.gl-mb-2= s_('UserProfile|Info')
+                    - if @user.location.present?
+                      .gl-mb-1
+                        = sprite_icon('location', css_class: 'fgray')
+                        %span{ itemprop: 'addressLocality' }
+                          = @user.location
+                    - if user_local_time.present?
+                      .gl-mb-1
+                        = sprite_icon('clock', css_class: 'fgray')
+                        %span
+                          = user_local_time
+                    - if work_information(@user).present?
+                      .gl-mb-1
+                        = sprite_icon('work', css_class: 'fgray')
+                        %span
+                          = work_information(@user, with_schema_markup: true)
+                    = sprite_icon('calendar', css_class: 'fgray')
+                    = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
 
-                .gl-pb-5
-                  .gl-font-weight-bold.gl-mb-3= s_('Achievements')
-                  - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
-                    #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
 
-                .cover-controls
+                .gl-text-gray-900.gl-mt-5
+                  %h3.h5.gl-mb-2= s_('UserProfile|Social')
+                  - if @user.website_url.present?
+                    .gl-mb-1
+                      - if Feature.enabled?(:security_auto_fix) && @user.bot?
+                        = sprite_icon('question-o', css_class: 'gl-text-blue-500')
+                      = sprite_icon('earth', css_class: 'fgray')
+                      = link_to @user.short_website_url, @user.full_website_url, class: 'gl-text-gray-900', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
+                  - if display_public_email?(@user)
+                    .gl-mb-1
+                      = sprite_icon('mail', css_class: 'fgray')
+                      = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'gl-text-gray-900', itemprop: 'email'
+                  - if @user.skype.present?
+                    .gl-mb-1
+                      = sprite_icon('skype', css_class: 'fgray')
+                      = link_to @user.skype, "skype:#{@user.skype}", class: 'gl-text-gray-900', title: "Skype"
+                  - if @user.linkedin.present?
+                    .gl-mb-1
+                      = sprite_icon('linkedin', css_class: 'fgray')
+                      = link_to @user.linkedin, linkedin_url(@user), class: 'gl-text-gray-900', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow'
+                  - if @user.twitter.present?
+                    .gl-mb-1
+                      = sprite_icon('twitter', css_class: 'fgray')
+                      = link_to @user.twitter, twitter_url(@user), class: 'gl-text-gray-900', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow'
+                  - if Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?
+                    .gl-mb-1
+                      = sprite_icon('mastodon', css_class: 'fgray')
+                      = link_to @user.mastodon, mastodon_url(@user), class: 'gl-text-gray-900', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow'
+                  - if @user.discord.present?
+                    .gl-mb-1
+                      = sprite_icon('discord', css_class: 'fgray')
+                      = link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
+
+                - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
+                  #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
+
+                .cover-controls.gl-mt-5
                   = render 'users/follow_user'
                   -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
                   - if @user == current_user
@@ -358,13 +207,10 @@
                     = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json), qa_selector: 'following_tab' } do
                       = s_('UserProfile|Following')
                       = gl_badge_tag @user.followees.count, size: :sm
-        - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
-          #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
-
-
-
 
       .col-12.col-md-8
+        - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
+          #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
         - unless Feature.enabled?(:profile_tabs_vue, current_user)
           .tab-content
             - if profile_tab?(:overview)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index db992821bcce29..6b7114726122a1 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2676,6 +2676,9 @@ msgstr ""
 msgid "Achievements|%{namespace_link} awarded you the %{bold_start}%{achievement_name}%{bold_end} achievement!"
 msgstr ""
 
+msgid "Achievements|Achievements"
+msgstr ""
+
 msgid "Achievements|Awarded %{timeAgo} by %{namespace}"
 msgstr ""
 
@@ -8120,9 +8123,6 @@ msgstr ""
 msgid "Billing|Your group recently changed to use the Free plan. %{over_limit_message} You can free up space for new members by removing those who no longer need access or toggling them to over-limit. To get an unlimited number of members, you can %{link_start}upgrade%{link_end} to a paid tier."
 msgstr ""
 
-msgid "Bio"
-msgstr ""
-
 msgid "Bitbucket Server Import"
 msgstr ""
 
@@ -12994,9 +12994,6 @@ msgstr ""
 msgid "Consistency guarantee method"
 msgstr ""
 
-msgid "Contact"
-msgstr ""
-
 msgid "Contact sales"
 msgstr ""
 
@@ -25339,9 +25336,6 @@ msgstr ""
 msgid "Indicates whether this runner can pick jobs without tags"
 msgstr ""
 
-msgid "Info"
-msgstr ""
-
 msgid "Inform users without uploaded SSH keys that they can't push over SSH until one is added"
 msgstr ""
 
@@ -52293,6 +52287,9 @@ msgstr ""
 msgid "UserProfile|Groups are the best way to manage projects and members."
 msgstr ""
 
+msgid "UserProfile|Info"
+msgstr ""
+
 msgid "UserProfile|Join or create a group to start contributing by commenting on issues or submitting merge requests!"
 msgstr ""
 
@@ -52323,6 +52320,9 @@ msgstr ""
 msgid "UserProfile|Snippets in GitLab can either be private, internal, or public."
 msgstr ""
 
+msgid "UserProfile|Social"
+msgstr ""
+
 msgid "UserProfile|Star projects to track their progress and show your appreciation."
 msgstr ""
 
-- 
GitLab


From 19bbf36c842b56b4178010ed5aa4f08515f93c9b Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 25 Oct 2023 13:26:56 +0200
Subject: [PATCH 03/21] Only show 5 recent activities, 3 personal projects

---
 .../javascripts/profile/components/activity_calendar.vue    | 6 +++---
 app/assets/javascripts/profile/components/overview_tab.vue  | 4 ++--
 app/assets/javascripts/profile/components/profile_tabs.vue  | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/profile/components/activity_calendar.vue b/app/assets/javascripts/profile/components/activity_calendar.vue
index 90971cf0b02ce9..afb4ed943e79fc 100644
--- a/app/assets/javascripts/profile/components/activity_calendar.vue
+++ b/app/assets/javascripts/profile/components/activity_calendar.vue
@@ -78,8 +78,8 @@ export default {
 </script>
 
 <template>
-  <div v-if="showCalendar" ref="calendarContainer">
-    <gl-loading-icon v-if="isLoading" size="md" />
+  <div v-if="showCalendar" ref="calendarContainer" class="gl-mt-5 gl-pb-5 gl-border-b">
+    <gl-loading-icon v-if="isLoading" size="sm" />
     <gl-alert
       v-else-if="hasError"
       :title="$options.i18n.errorAlertTitle"
@@ -90,7 +90,7 @@ export default {
     />
     <div v-else class="gl-display-inline-block gl-relative gl-w-full">
       <div ref="calendarSvgContainer"></div>
-      <p class="gl-absolute gl-right-0 gl-bottom-0 gl-mb-0 gl-font-sm">
+      <p class="gl-absolute gl-right-0 gl-bottom-0 gl-mb-0 gl-font-sm gl-text-secondary">
         {{ $options.i18n.calendarHint }}
       </p>
     </div>
diff --git a/app/assets/javascripts/profile/components/overview_tab.vue b/app/assets/javascripts/profile/components/overview_tab.vue
index 3d622957a414b5..148bdbc43b124d 100644
--- a/app/assets/javascripts/profile/components/overview_tab.vue
+++ b/app/assets/javascripts/profile/components/overview_tab.vue
@@ -40,7 +40,7 @@ export default {
 
     try {
       const { data: events } = await axios.get(this.userActivityPath, {
-        params: { limit: 10 },
+        params: { limit: 5 },
       });
       this.events = events;
     } catch (error) {
@@ -54,7 +54,6 @@ export default {
 
 <template>
   <gl-tab :title="$options.i18n.title">
-    <activity-calendar />
     <div class="gl-mt-5 gl-display-flex gl-flex-wrap">
       <div class="gl-w-full" data-testid="activity-section">
         <div
@@ -63,6 +62,7 @@ export default {
           <h4 class="gl-flex-grow-1">{{ $options.i18n.activity }}</h4>
           <gl-link href="">{{ $options.i18n.viewAll }}</gl-link>
         </div>
+        <activity-calendar />
         <gl-loading-icon v-if="eventsLoading" class="gl-mt-5" size="md" />
         <contribution-events v-else :events="events" />
       </div>
diff --git a/app/assets/javascripts/profile/components/profile_tabs.vue b/app/assets/javascripts/profile/components/profile_tabs.vue
index e24167eb4fa713..a15794ac07d517 100644
--- a/app/assets/javascripts/profile/components/profile_tabs.vue
+++ b/app/assets/javascripts/profile/components/profile_tabs.vue
@@ -81,7 +81,7 @@ export default {
   },
   async mounted() {
     try {
-      const response = await getUserProjects(this.userId, { per_page: 10 });
+      const response = await getUserProjects(this.userId, { per_page: 3 });
       this.personalProjects = convertObjectPropsToCamelCase(response.data, { deep: true }).map(
         (project) => {
           // This API does not return the `visibility` key if user is signed out.
-- 
GitLab


From df2da4d63c7c3d3e816297cb065409be639447f3 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 25 Oct 2023 13:53:18 +0200
Subject: [PATCH 04/21] Make Profile info sticky

---
 app/assets/javascripts/pages/users/user_tabs.js  |  4 ++--
 app/assets/stylesheets/page_bundles/profile.scss | 10 ++++++----
 app/views/users/show.html.haml                   |  6 +++---
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index a2df8be1bb7015..e28142ec5a61fb 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -67,7 +67,7 @@ import UserOverviewBlock from './user_overview_block';
 const CALENDAR_TEMPLATE = `
   <div class="calendar">
     <div class="js-contrib-calendar"></div>
-    <div class="calendar-hint"></div>
+    <div class="calendar-hint gl-font-sm gl-text-secondary"></div>
   </div>
 `;
 
@@ -200,7 +200,7 @@ export default class UserTabs {
       requestParams: { limit: 15 },
     });
     UserTabs.renderMostRecentBlocks('#js-overview .projects-block', {
-      requestParams: { limit: 10, skip_pagination: true, skip_namespace: true, compact_mode: true },
+      requestParams: { limit: 5, skip_pagination: true, skip_namespace: true, compact_mode: true },
     });
 
     this.loaded.overview = true;
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index b060cf73671b1a..56fef2874ec104 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -40,9 +40,8 @@
 // }
 
 .calendar-hint {
-  font-size: 12px;
   direction: ltr;
-  margin-top: -23px;
+  margin-top: -36px;
   float: right;
 }
 
@@ -170,7 +169,10 @@
 }
 
 .user-profile {
-  // .profile-header {
+  .profile-header {
+    position: sticky;
+    top: $calc-application-header-height;
+
   //   margin: 0 $gl-padding;
 
   //   &.with-no-profile-tabs {
@@ -180,7 +182,7 @@
   //   .avatar-holder {
   //     margin: 0 auto 10px;
   //   }
-  // }
+  }
 
   .user-profile-nav {
     font-size: 0;
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 73e17e60d5c294..a5ee68a276eafe 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -17,8 +17,8 @@
 .user-profile
   %div{ class: container_class }
     .row
-      .col-12.col-md-4.gl-mt-5
-        .profile-header{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
+      .col-12.col-md-4
+        .profile-header.gl-pt-5{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
 
         - if profile_tab?(:activity)
           #activity.tab-pane
@@ -212,7 +212,7 @@
         - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
           #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
         - unless Feature.enabled?(:profile_tabs_vue, current_user)
-          .tab-content
+          .tab-content.gl-mt-3
             - if profile_tab?(:overview)
               #js-overview.tab-pane
                 = render "users/overview"
-- 
GitLab


From c0a52f773f4e60a03c7789c522a3417ffbc3dc9f Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 25 Oct 2023 13:58:11 +0200
Subject: [PATCH 05/21] Move README to top of overview page

---
 .../stylesheets/page_bundles/profile.scss       |  4 ++++
 app/views/users/_overview.html.haml             | 17 +++++++++++++++--
 app/views/users/show.html.haml                  |  2 +-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index 56fef2874ec104..36be91b7b5d5c0 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -155,6 +155,10 @@
 //   }
 // }
 
+.profile-readme {
+  max-height: 480px;
+}
+
 .user-calendar-activities {
   direction: ltr;
 
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 7e6b781bb257d0..b04b48d811b4ed 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -2,6 +2,21 @@
 
 
 - if can?(current_user, :read_cross_project)
+  - if @user.user_readme&.rich_viewer
+    .profile-readme.justify-content-center.gl-border.gl-rounded-base.gl-px-6.gl-mb-5.gl-overflow-y-auto
+      .gl-my-6
+        .gl-display-flex
+          %ol.breadcrumb.gl-breadcrumb-list.gl-mb-4
+            %li.gl-breadcrumb-item
+              = link_to project_path(@user.user_project) do
+                = @user.username
+            %li.gl-breadcrumb-item
+              = link_to @user.user_readme.path, @user.user_project.readme_url
+          - if current_user == @user
+            .gl-ml-auto
+              = link_to _('Edit'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
+        = render 'projects/blob/viewer', viewer: @user.user_readme.rich_viewer, load_async: false
+
   .activities-block
     .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid.gl-mb-4
       %h4.gl-flex-grow-1
@@ -45,8 +60,6 @@
     .overview-content-list{ data: { href: user_activity_path, testid: 'user-activity-content' } }
       = gl_loading_icon(size: 'md', css_class: 'loading')
 
-
-
 - unless Feature.enabled?(:security_auto_fix) && @user.bot?
   .projects-block
     .gl-mt-5
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index a5ee68a276eafe..bf582202f4697c 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -212,7 +212,7 @@
         - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
           #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
         - unless Feature.enabled?(:profile_tabs_vue, current_user)
-          .tab-content.gl-mt-3
+          .tab-content.gl-mt-5.gl-overflow-hidden
             - if profile_tab?(:overview)
               #js-overview.tab-pane
                 = render "users/overview"
-- 
GitLab


From fd60ebd7e0dcbbf045bfe883e4e2051c9058cd46 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 25 Oct 2023 14:24:32 +0200
Subject: [PATCH 06/21] Fix top spacing

---
 app/views/users/show.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index bf582202f4697c..bb0eca19b1dcc7 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -221,7 +221,7 @@
               #activity.tab-pane
                 .flash-container
                 - if can?(current_user, :read_cross_project)
-                  %h4.prepend-top-20
+                  %h4.gl-mt-0
                     = s_('UserProfile|Most Recent Activity')
                   .content_list{ data: { href: user_activity_path } }
                   .loading
-- 
GitLab


From 3051caae01fb443ab986dc9e13e55b0a015eeca8 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 25 Oct 2023 14:34:06 +0200
Subject: [PATCH 07/21] Move achievements below the user name

---
 .../javascripts/profile/components/user_achievements.vue    | 5 +----
 app/views/users/show.html.haml                              | 6 +++---
 locale/gitlab.pot                                           | 3 ---
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/profile/components/user_achievements.vue b/app/assets/javascripts/profile/components/user_achievements.vue
index 4fecfda862ac22..f27f4b1279ba8d 100644
--- a/app/assets/javascripts/profile/components/user_achievements.vue
+++ b/app/assets/javascripts/profile/components/user_achievements.vue
@@ -72,10 +72,7 @@ export default {
 </script>
 
 <template>
-  <div>
-    <h3 v-if="userAchievements.length > 0" class="h5 gl-mb-2">
-      {{ s__('Achievements|Achievements') }}
-    </h3>
+  <div class="gl-my-3">
     <div
       v-for="userAchievement in userAchievements"
       :key="userAchievement.id"
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index bb0eca19b1dcc7..814c8bc2716a11 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -61,6 +61,9 @@
                   - if @user.status&.busy?
                     = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
 
+                - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
+                  #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
+
                 - if @user.status&.customized?
                   .cover-status.gl-display-inline-flex.gl-align-items-baseline.gl-px-4.gl-py-3.gl-border.gl-bg-gray-10.gl-rounded-6.gl-font-sm
                     = emoji_icon(@user.status.emoji, class: 'gl-mr-3')
@@ -141,9 +144,6 @@
                       = sprite_icon('discord', css_class: 'fgray')
                       = link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
 
-                - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
-                  #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
-
                 .cover-controls.gl-mt-5
                   = render 'users/follow_user'
                   -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6b7114726122a1..7ea1c6d21a349e 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2676,9 +2676,6 @@ msgstr ""
 msgid "Achievements|%{namespace_link} awarded you the %{bold_start}%{achievement_name}%{bold_end} achievement!"
 msgstr ""
 
-msgid "Achievements|Achievements"
-msgstr ""
-
 msgid "Achievements|Awarded %{timeAgo} by %{namespace}"
 msgstr ""
 
-- 
GitLab


From 3d61737f4f810edc2a6deae98c308e0fb0b6022a Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 25 Oct 2023 16:28:18 +0200
Subject: [PATCH 08/21] Fix some spacings, reduce README to 320px max height

---
 app/assets/stylesheets/page_bundles/profile.scss | 12 ++++++------
 app/views/users/_overview.html.haml              | 15 +++++++--------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index 36be91b7b5d5c0..9f8f9328306c53 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -156,7 +156,7 @@
 // }
 
 .profile-readme {
-  max-height: 480px;
+  max-height: 320px;
 }
 
 .user-calendar-activities {
@@ -214,11 +214,11 @@
     }
   }
 
-  .projects-block {
-    @include media-breakpoint-up(lg) {
-      margin-left: 5px;
-    }
-  }
+  // .projects-block {
+  //   @include media-breakpoint-up(lg) {
+  //     margin-left: 5px;
+  //   }
+  // }
 
   @include media-breakpoint-down(xs) {
     // .cover-block {
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index b04b48d811b4ed..1aa05bb13fc25a 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -61,11 +61,10 @@
       = gl_loading_icon(size: 'md', css_class: 'loading')
 
 - unless Feature.enabled?(:security_auto_fix) && @user.bot?
-  .projects-block
-    .gl-mt-5
-      .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid
-        %h4.gl-flex-grow-1
-          = s_('UserProfile|Personal projects')
-        = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
-      .overview-content-list{ data: { href: user_projects_path } }
-        = gl_loading_icon(size: 'md', css_class: 'loading')
+  .projects-block.gl-mt-2
+    .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid
+      %h4.gl-flex-grow-1
+        = s_('UserProfile|Personal projects')
+      = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
+    .overview-content-list{ data: { href: user_projects_path } }
+      = gl_loading_icon(size: 'md', css_class: 'loading')
-- 
GitLab


From 2fa0164bede7b466f3a28f236dc9dc025f193a63 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 25 Oct 2023 16:41:41 +0200
Subject: [PATCH 09/21] Render default sized buttons

---
 app/views/users/_follow_user.html.haml             | 4 ++--
 app/views/users/_view_gpg_keys.html.haml           | 1 -
 app/views/users/_view_user_in_admin_area.html.haml | 1 -
 app/views/users/show.html.haml                     | 7 ++++---
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/views/users/_follow_user.html.haml b/app/views/users/_follow_user.html.haml
index 67b6a35d16377d..71f8a462cbf7bf 100644
--- a/app/views/users/_follow_user.html.haml
+++ b/app/views/users/_follow_user.html.haml
@@ -3,9 +3,9 @@
 - if current_user&.following_users_allowed?(@user)
   - if current_user.following?(@user)
     = form_tag user_unfollow_path(@user, :json), class: link_classes do
-      = render Pajamas::ButtonComponent.new(type: :submit, size: :small, button_options: { class: 'gl-w-full', data: { track_action: 'click_button', track_label: 'unfollow_from_profile' } }) do
+      = render Pajamas::ButtonComponent.new(type: :submit, button_options: { class: 'gl-w-full', data: { track_action: 'click_button', track_label: 'unfollow_from_profile' } }) do
         = _('Unfollow')
   - else
     = form_tag user_follow_path(@user, :json), class: link_classes do
-      = render Pajamas::ButtonComponent.new(variant: :confirm, size: :small, type: :submit, button_options: { class: 'gl-w-full', data: { testid: 'follow-user-link', track_action: 'click_button', track_label: 'follow_from_profile' } }) do
+      = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { class: 'gl-w-full', data: { testid: 'follow-user-link', track_action: 'click_button', track_label: 'follow_from_profile' } }) do
         = _('Follow')
diff --git a/app/views/users/_view_gpg_keys.html.haml b/app/views/users/_view_gpg_keys.html.haml
index fcdc7cd75121b5..aa0f69ffe3ce60 100644
--- a/app/views/users/_view_gpg_keys.html.haml
+++ b/app/views/users/_view_gpg_keys.html.haml
@@ -1,6 +1,5 @@
 - verified_gpg_keys = @user.gpg_keys.select(&:verified?)
 - if verified_gpg_keys.any?
   = render Pajamas::ButtonComponent.new(href: user_gpg_keys_path,
-    size: :small,
     icon: 'key',
     button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: n_('View public GPG key', 'View public GPG keys', verified_gpg_keys.length), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
diff --git a/app/views/users/_view_user_in_admin_area.html.haml b/app/views/users/_view_user_in_admin_area.html.haml
index 0c39015dd07a86..36b3c33d8ab362 100644
--- a/app/views/users/_view_user_in_admin_area.html.haml
+++ b/app/views/users/_view_user_in_admin_area.html.haml
@@ -1,5 +1,4 @@
 - if current_user && current_user.admin?
   = render Pajamas::ButtonComponent.new(href: [:admin, @user],
-    size: :small,
     icon: 'user',
     button_options: { class: 'gl-flex-grow-1 has-tooltip', title: s_('UserProfile|View user in admin area'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } })
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 814c8bc2716a11..664931c520999d 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -112,7 +112,8 @@
 
 
                 .gl-text-gray-900.gl-mt-5
-                  %h3.h5.gl-mb-2= s_('UserProfile|Social')
+                  - if @user.website_url.present? || display_public_email?(@user) || @user.skype.present? || @user.linkedin.present? || @user.twitter.present? || (Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?) || @user.discord.present?
+                    %h3.h5.gl-mb-2= s_('UserProfile|Social')
                   - if @user.website_url.present?
                     .gl-mb-1
                       - if Feature.enabled?(:security_auto_fix) && @user.bot?
@@ -144,11 +145,11 @@
                       = sprite_icon('discord', css_class: 'fgray')
                       = link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
 
-                .cover-controls.gl-mt-5
+                .cover-controls.gl-display-inline-flex.gl-gap-3.gl-mt-5
                   = render 'users/follow_user'
                   -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
                   - if @user == current_user
-                    = render Pajamas::ButtonComponent.new(href: profile_path, size: :small,
+                    = render Pajamas::ButtonComponent.new(href: profile_path,
                       button_options: { class: 'gl-flex-grow-1', title: s_('UserProfile|Edit profile') }) do
                       = s_("UserProfile|Edit profile")
                   = render 'users/view_gpg_keys'
-- 
GitLab


From a24e621b4f9a91992973d38f58d70c174ca965ce Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Wed, 25 Oct 2023 11:45:23 -0600
Subject: [PATCH 10/21] Remove projects from overview tab

---
 app/assets/javascripts/pages/users/user_tabs.js | 3 ---
 app/views/users/_overview.html.haml             | 9 ---------
 2 files changed, 12 deletions(-)

diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index e28142ec5a61fb..fbfeef0a856957 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -199,9 +199,6 @@ export default class UserTabs {
     UserTabs.renderMostRecentBlocks('#js-overview .activities-block', {
       requestParams: { limit: 15 },
     });
-    UserTabs.renderMostRecentBlocks('#js-overview .projects-block', {
-      requestParams: { limit: 5, skip_pagination: true, skip_namespace: true, compact_mode: true },
-    });
 
     this.loaded.overview = true;
   }
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 1aa05bb13fc25a..35519754a022eb 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -59,12 +59,3 @@
     .user-calendar-activities
     .overview-content-list{ data: { href: user_activity_path, testid: 'user-activity-content' } }
       = gl_loading_icon(size: 'md', css_class: 'loading')
-
-- unless Feature.enabled?(:security_auto_fix) && @user.bot?
-  .projects-block.gl-mt-2
-    .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid
-      %h4.gl-flex-grow-1
-        = s_('UserProfile|Personal projects')
-      = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
-    .overview-content-list{ data: { href: user_projects_path } }
-      = gl_loading_icon(size: 'md', css_class: 'loading')
-- 
GitLab


From 6fbc0fb5e39e4bdbe3ec993122c1ad6bc22324f9 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 26 Oct 2023 09:44:22 +0200
Subject: [PATCH 11/21] Make contrib calendar scrollable (always show end), use
 CSS grid

---
 .../pages/users/activity_calendar.js          |  38 +-
 .../javascripts/pages/users/user_tabs.js      |  39 +-
 .../stylesheets/page_bundles/profile.scss     |  34 +-
 app/views/users/show.html.haml                | 445 +++++++++---------
 4 files changed, 301 insertions(+), 255 deletions(-)

diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 1bd3c25a89a4a1..ba8c9e6c5a5e0c 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -131,7 +131,7 @@ export default class ActivityCalendar {
     this.renderDays();
     this.renderMonths();
     this.renderDayTitles();
-    this.renderKey();
+    // this.renderKey();
   }
 
   // Add extra padding for the last month label if it is also the last column
@@ -257,24 +257,24 @@ export default class ActivityCalendar {
       .text((date) => this.monthNames[date.month]);
   }
 
-  renderKey() {
-    this.svg
-      .append('g')
-      .attr('transform', `translate(18, ${this.daySizeWithSpace * 8 + 16})`)
-      .selectAll('rect')
-      .data(CONTRIB_LEGENDS)
-      .enter()
-      .append('rect')
-      .attr('width', this.daySize)
-      .attr('height', this.daySize)
-      .attr('x', (_, i) => this.daySizeWithSpace * i)
-      .attr('y', 0)
-      .attr('data-level', (_, i) => i)
-      .attr('class', 'user-contrib-cell has-tooltip contrib-legend')
-      .attr('title', (x) => x.title)
-      .attr('data-container', 'body')
-      .attr('data-html', true);
-  }
+  // renderKey() {
+  //   this.svg
+  //     .append('g')
+  //     .attr('transform', `translate(18, ${this.daySizeWithSpace * 8 + 16})`)
+  //     .selectAll('rect')
+  //     .data(CONTRIB_LEGENDS)
+  //     .enter()
+  //     .append('rect')
+  //     .attr('width', this.daySize)
+  //     .attr('height', this.daySize)
+  //     .attr('x', (_, i) => this.daySizeWithSpace * i)
+  //     .attr('y', 0)
+  //     .attr('data-level', (_, i) => i)
+  //     .attr('class', 'user-contrib-cell has-tooltip contrib-legend')
+  //     .attr('title', (x) => x.title)
+  //     .attr('data-container', 'body')
+  //     .attr('data-html', true);
+  // }
 
   clickDay(stamp) {
     if (this.currentSelectedDate !== stamp.date) {
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index fbfeef0a856957..d8abd7a96e3fca 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -67,17 +67,33 @@ import UserOverviewBlock from './user_overview_block';
 const CALENDAR_TEMPLATE = `
   <div class="calendar">
     <div class="js-contrib-calendar"></div>
+    <div class="calendar-legend">
+      <svg width="76px" height="16px">
+        <g>
+          <rect width="13" height="13" x="0" y="0" data-level="0" class="user-contrib-cell has-tooltip contrib-legend" title="${__(
+            'No contributions',
+          )}" data-container="body" data-html="true"></rect>
+          <rect width="13" height="13" x="15" y="0" data-level="1" class="user-contrib-cell has-tooltip contrib-legend" title="${__(
+            '1-9 contributions',
+          )}" data-container="body" data-html="true"></rect>
+          <rect width="13" height="13" x="30" y="0" data-level="2" class="user-contrib-cell has-tooltip contrib-legend" title="${__(
+            '10-19 contributions',
+          )}" data-container="body" data-html="true"></rect>
+          <rect width="13" height="13" x="45" y="0" data-level="3" class="user-contrib-cell has-tooltip contrib-legend" title="${__(
+            '20-29 contributions',
+          )}" data-container="body" data-html="true"></rect>
+          <rect width="13" height="13" x="60" y="0" data-level="4" class="user-contrib-cell has-tooltip contrib-legend" title="${__(
+            '30+ contributions',
+          )}" data-container="body" data-html="true"></rect>
+        </g>
+      </svg>
+    </div>
     <div class="calendar-hint gl-font-sm gl-text-secondary"></div>
   </div>
 `;
 
 // const CALENDAR_PERIOD_6_MONTHS = 6;
 const CALENDAR_PERIOD_12_MONTHS = 12;
-/* computation based on
- * width = (group + 1) * this.daySizeWithSpace + this.getExtraWidthPadding(group);
- * (see activity_calendar.js)
- */
-const OVERVIEW_CALENDAR_BREAKPOINT = 918;
 
 export default class UserTabs {
   constructor({ defaultAction, action, parentEl }) {
@@ -237,7 +253,7 @@ export default class UserTabs {
   }
 
   static renderActivityCalendar(data, $calendarWrap) {
-    const monthsAgo = UserTabs.getVisibleCalendarPeriod($calendarWrap);
+    const monthsAgo = UserTabs.getVisibleCalendarPeriod();
     const calendarActivitiesPath = $calendarWrap.data('calendarActivitiesPath');
     const utcOffset = $calendarWrap.data('utcOffset');
     const calendarHint = __('Issues, merge requests, pushes, and comments.');
@@ -256,6 +272,10 @@ export default class UserTabs {
       firstDayOfWeek: gon.first_day_of_week,
       monthsAgo,
     });
+
+    // Scroll to end
+    const calendarContainer = document.querySelector('.js-contrib-calendar');
+    calendarContainer.scrollLeft = calendarContainer.scrollWidth;
   }
 
   toggleLoading(status) {
@@ -280,10 +300,7 @@ export default class UserTabs {
     return this.$parentEl.find('.nav-links a.active').data('action');
   }
 
-  static getVisibleCalendarPeriod($calendarWrap) {
-    const width = $calendarWrap.width();
-    return width < OVERVIEW_CALENDAR_BREAKPOINT
-      ? CALENDAR_PERIOD_12_MONTHS
-      : CALENDAR_PERIOD_12_MONTHS;
+  static getVisibleCalendarPeriod() {
+    return CALENDAR_PERIOD_12_MONTHS;
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index 9f8f9328306c53..d47a7215e46379 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -39,16 +39,28 @@
 //   }
 // }
 
+.calendar-legend,
 .calendar-hint {
+  position: relative;
+  z-index: 2;
   direction: ltr;
   margin-top: -36px;
+}
+
+.calendar-legend {
+  float: left;
+}
+
+.calendar-hint {
   float: right;
 }
 
 .user-profile-image {
   .gl-avatar {
-    height: 7.5rem;
-    width: 7.5rem;
+    @include media-breakpoint-up(md) {
+      height: 7.5rem;
+      width: 7.5rem;
+    }
   }
 }
 
@@ -287,3 +299,21 @@
     border: 0;
   }
 }
+
+.user-profile {
+  @include media-breakpoint-up(md) {
+    display: grid;
+    grid-template-columns: minmax(240px, 1fr) 3fr;
+    gap: 3rem;
+  }
+}
+
+.user-profile-sidebar,
+.user-profile-content {
+  min-width: 1px; // grid overflow fix
+}
+
+.js-contrib-calendar {
+  // make contrib calendar scrollable
+  overflow-x: auto;
+}
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 664931c520999d..3341f90c3c65ec 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -14,11 +14,10 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")
 
-.user-profile
-  %div{ class: container_class }
-    .row
-      .col-12.col-md-4
-        .profile-header.gl-pt-5{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
+%div{ class: container_class }
+  .user-profile
+    .user-profile-sidebar
+      .profile-header.gl-pt-5{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
 
         - if profile_tab?(:activity)
           #activity.tab-pane
@@ -36,235 +35,235 @@
             #groups.tab-pane
               -# This tab is always loaded via AJAX
 
-          = link_to avatar_icon_for_user(@user, 400, current_user: current_user), class: "user-profile-image", target: '_blank', rel: 'noopener noreferrer' do
-            = render Pajamas::AvatarComponent.new(@user, alt: "", size: 96, avatar_options: { itemprop: "image" })
-
-
-          .gl-display-inline-block.gl-vertical-align-top.gl-text-left.gl-max-w-80
-            - if @user.blocked? || !@user.confirmed?
-              .user-info
-                %h1.gl-font-size-h-display.gl-line-height-1
-                  %p.gl-mr-2.gl-mb-0
-                    = user_display_name(@user)
+        = link_to avatar_icon_for_user(@user, 400, current_user: current_user), class: "user-profile-image gl-display-block", target: '_blank', rel: 'noopener noreferrer' do
+          = render Pajamas::AvatarComponent.new(@user, alt: "", size: 96, avatar_options: { itemprop: "image" })
+
+
+        .gl-display-inline-block.gl-vertical-align-top.gl-text-left.gl-max-w-80
+          - if @user.blocked? || !@user.confirmed?
+            .user-info
+              %h1.gl-font-size-h-display.gl-line-height-1
+                %p.gl-mr-2.gl-mb-0
+                  = user_display_name(@user)
+              - if can?(current_user, :read_user_profile, @user)
+                %span.gl-text-gray-600.gl-font-weight-normal.gl-mt-0
+                  @#{@user.username}
+
+          - else
+            .user-info
+              %h1.gl-font-size-h-display.gl-line-height-1{ itemprop: 'name' }
+                %p.gl-mr-2.gl-mb-0
+                  = @user.name
                 - if can?(current_user, :read_user_profile, @user)
-                  %span.gl-text-gray-600.gl-font-weight-normal.gl-mt-0
+                  %span.gl-text-gray-600.gl-font-weight-normal.gl-mb-0
                     @#{@user.username}
-
-            - else
-              .user-info
-                %h1.gl-font-size-h-display.gl-line-height-1{ itemprop: 'name' }
-                  %p.gl-mr-2.gl-mb-0
-                    = @user.name
-                  - if can?(current_user, :read_user_profile, @user)
-                    %span.gl-text-gray-600.gl-font-weight-normal.gl-mb-0
-                      @#{@user.username}
-                  - if @user.status&.busy?
-                    = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
-
-                - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
-                  #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
-
-                - if @user.status&.customized?
-                  .cover-status.gl-display-inline-flex.gl-align-items-baseline.gl-px-4.gl-py-3.gl-border.gl-bg-gray-10.gl-rounded-6.gl-font-sm
-                    = emoji_icon(@user.status.emoji, class: 'gl-mr-3')
-                    = markdown_field(@user.status, :message)
-
-                - if @user.pronouns.present? || @user.pronunciation.present?
-                  .gl-mt-5
-                  - if @user.pronouns.present?
-                    .gl-align-items-center
-                      %p.gl-mb-4.gl-text-secondary{ class: 'gl-mb-0!' }
-                        = s_("UserProfile|Pronouns: %{pronouns}") % { pronouns: @user.pronouns }
-
-                  - if @user.pronunciation.present?
-                    .gl-align-items-center
-                      %p.gl-mb-4.gl-text-secondary
-                        = s_("UserProfile|Pronounced as: %{pronunciation}") % { pronunciation: @user.pronunciation }
-
-                -# Ensure this stays indented one level less than the social links
-                -# See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/118314
-                - if @user.bio.present? && @user.confirmed? && !@user.blocked?
-                  %p.profile-user-bio.gl-mt-5
-                    = @user.bio
-
-
-                - user_local_time = local_time(@user.timezone)
-                - if @user.location.present? || user_local_time.present? || work_information(@user).present?
-                  .gl-mt-5
-                    %h3.h5.gl-mb-2= s_('UserProfile|Info')
-                    - if @user.location.present?
-                      .gl-mb-1
-                        = sprite_icon('location', css_class: 'fgray')
-                        %span{ itemprop: 'addressLocality' }
-                          = @user.location
-                    - if user_local_time.present?
-                      .gl-mb-1
-                        = sprite_icon('clock', css_class: 'fgray')
-                        %span
-                          = user_local_time
-                    - if work_information(@user).present?
-                      .gl-mb-1
-                        = sprite_icon('work', css_class: 'fgray')
-                        %span
-                          = work_information(@user, with_schema_markup: true)
-                    = sprite_icon('calendar', css_class: 'fgray')
-                    = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
-
-
-                .gl-text-gray-900.gl-mt-5
-                  - if @user.website_url.present? || display_public_email?(@user) || @user.skype.present? || @user.linkedin.present? || @user.twitter.present? || (Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?) || @user.discord.present?
-                    %h3.h5.gl-mb-2= s_('UserProfile|Social')
-                  - if @user.website_url.present?
-                    .gl-mb-1
-                      - if Feature.enabled?(:security_auto_fix) && @user.bot?
-                        = sprite_icon('question-o', css_class: 'gl-text-blue-500')
-                      = sprite_icon('earth', css_class: 'fgray')
-                      = link_to @user.short_website_url, @user.full_website_url, class: 'gl-text-gray-900', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
-                  - if display_public_email?(@user)
-                    .gl-mb-1
-                      = sprite_icon('mail', css_class: 'fgray')
-                      = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'gl-text-gray-900', itemprop: 'email'
-                  - if @user.skype.present?
+                - if @user.status&.busy?
+                  = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
+
+              - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
+                #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
+
+              - if @user.status&.customized?
+                .cover-status.gl-display-inline-flex.gl-align-items-baseline.gl-px-4.gl-py-3.gl-border.gl-bg-gray-10.gl-rounded-6.gl-font-sm
+                  = emoji_icon(@user.status.emoji, class: 'gl-mr-3')
+                  = markdown_field(@user.status, :message)
+
+              - if @user.pronouns.present? || @user.pronunciation.present?
+                .gl-mt-5
+                - if @user.pronouns.present?
+                  .gl-align-items-center
+                    %p.gl-mb-4.gl-text-secondary{ class: 'gl-mb-0!' }
+                      = s_("UserProfile|Pronouns: %{pronouns}") % { pronouns: @user.pronouns }
+
+                - if @user.pronunciation.present?
+                  .gl-align-items-center
+                    %p.gl-mb-4.gl-text-secondary
+                      = s_("UserProfile|Pronounced as: %{pronunciation}") % { pronunciation: @user.pronunciation }
+
+              -# Ensure this stays indented one level less than the social links
+              -# See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/118314
+              - if @user.bio.present? && @user.confirmed? && !@user.blocked?
+                %p.profile-user-bio.gl-mt-5
+                  = @user.bio
+
+
+              - user_local_time = local_time(@user.timezone)
+              - if @user.location.present? || user_local_time.present? || work_information(@user).present?
+                .gl-mt-5
+                  %h3.h5.gl-mb-2= s_('UserProfile|Info')
+                  - if @user.location.present?
                     .gl-mb-1
-                      = sprite_icon('skype', css_class: 'fgray')
-                      = link_to @user.skype, "skype:#{@user.skype}", class: 'gl-text-gray-900', title: "Skype"
-                  - if @user.linkedin.present?
+                      = sprite_icon('location', css_class: 'fgray')
+                      %span{ itemprop: 'addressLocality' }
+                        = @user.location
+                  - if user_local_time.present?
                     .gl-mb-1
-                      = sprite_icon('linkedin', css_class: 'fgray')
-                      = link_to @user.linkedin, linkedin_url(@user), class: 'gl-text-gray-900', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow'
-                  - if @user.twitter.present?
+                      = sprite_icon('clock', css_class: 'fgray')
+                      %span
+                        = user_local_time
+                  - if work_information(@user).present?
                     .gl-mb-1
-                      = sprite_icon('twitter', css_class: 'fgray')
-                      = link_to @user.twitter, twitter_url(@user), class: 'gl-text-gray-900', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow'
-                  - if Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?
-                    .gl-mb-1
-                      = sprite_icon('mastodon', css_class: 'fgray')
-                      = link_to @user.mastodon, mastodon_url(@user), class: 'gl-text-gray-900', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow'
-                  - if @user.discord.present?
-                    .gl-mb-1
-                      = sprite_icon('discord', css_class: 'fgray')
-                      = link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
-
-                .cover-controls.gl-display-inline-flex.gl-gap-3.gl-mt-5
-                  = render 'users/follow_user'
-                  -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
-                  - if @user == current_user
-                    = render Pajamas::ButtonComponent.new(href: profile_path,
-                      button_options: { class: 'gl-flex-grow-1', title: s_('UserProfile|Edit profile') }) do
-                      = s_("UserProfile|Edit profile")
-                  = render 'users/view_gpg_keys'
-                  = render 'users/view_user_in_admin_area'
-                  .js-user-profile-actions{ data: user_profile_actions_data(@user) }
-
-
-
-
-
-
-
-        - if !profile_tabs.empty? && !Feature.enabled?(:profile_tabs_vue, current_user)
-          .scrolling-tabs-container{ class: [('gl-display-none' if show_super_sidebar?)] }
-            %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
-              = sprite_icon('chevron-lg-left', size: 12)
-            %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
-              = sprite_icon('chevron-lg-right', size: 12)
-            %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs.gl-border-b-0
-              - if profile_tab?(:overview)
-                %li.js-overview-tab
-                  = link_to user_path, data: { target: 'div#js-overview', action: 'overview', toggle: 'tab' } do
-                    = s_('UserProfile|Overview')
-              - if profile_tab?(:activity)
-                %li.js-activity-tab
-                  = link_to user_activity_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
-                    = s_('UserProfile|Activity')
-              - unless Feature.enabled?(:security_auto_fix) && @user.bot?
-                - if profile_tab?(:groups)
-                  %li.js-groups-tab
-                    = link_to user_groups_path, data: { target: 'div#groups', action: 'groups', toggle: 'tab', endpoint: user_groups_path(format: :json) } do
-                      = s_('UserProfile|Groups')
-                - if profile_tab?(:contributed)
-                  %li.js-contributed-tab
-                    = link_to user_contributed_projects_path, data: { target: 'div#contributed', action: 'contributed', toggle: 'tab', endpoint: user_contributed_projects_path(format: :json) } do
-                      = s_('UserProfile|Contributed projects')
-                - if profile_tab?(:projects)
-                  %li.js-projects-tab
-                    = link_to user_projects_path, data: { target: 'div#projects', action: 'projects', toggle: 'tab', endpoint: user_projects_path(format: :json) } do
-                      = s_('UserProfile|Personal projects')
-                - if profile_tab?(:starred)
-                  %li.js-starred-tab
-                    = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json) } do
-                      = s_('UserProfile|Starred projects')
-                - if profile_tab?(:snippets)
-                  %li.js-snippets-tab
-                    = link_to user_snippets_path, data: { target: 'div#snippets', action: 'snippets', toggle: 'tab', endpoint: user_snippets_path(format: :json) } do
-                      = s_('UserProfile|Snippets')
-                - if profile_tab?(:followers)
-                  %li.js-followers-tab
-                    = link_to user_followers_path, data: { target: 'div#followers', action: 'followers', toggle: 'tab', endpoint: user_followers_path(format: :json) } do
-                      = s_('UserProfile|Followers')
-                      = gl_badge_tag @user.followers.count, size: :sm
-                - if profile_tab?(:following)
-                  %li.js-following-tab
-                    = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json), qa_selector: 'following_tab' } do
-                      = s_('UserProfile|Following')
-                      = gl_badge_tag @user.followees.count, size: :sm
-
-      .col-12.col-md-8
-        - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
-          #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
-        - unless Feature.enabled?(:profile_tabs_vue, current_user)
-          .tab-content.gl-mt-5.gl-overflow-hidden
+                      = sprite_icon('work', css_class: 'fgray')
+                      %span
+                        = work_information(@user, with_schema_markup: true)
+                  = sprite_icon('calendar', css_class: 'fgray')
+                  = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
+
+
+              .gl-text-gray-900.gl-mt-5
+                - if @user.website_url.present? || display_public_email?(@user) || @user.skype.present? || @user.linkedin.present? || @user.twitter.present? || (Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?) || @user.discord.present?
+                  %h3.h5.gl-mb-2= s_('UserProfile|Social')
+                - if @user.website_url.present?
+                  .gl-mb-1
+                    - if Feature.enabled?(:security_auto_fix) && @user.bot?
+                      = sprite_icon('question-o', css_class: 'gl-text-blue-500')
+                    = sprite_icon('earth', css_class: 'fgray')
+                    = link_to @user.short_website_url, @user.full_website_url, class: 'gl-text-gray-900', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
+                - if display_public_email?(@user)
+                  .gl-mb-1
+                    = sprite_icon('mail', css_class: 'fgray')
+                    = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'gl-text-gray-900', itemprop: 'email'
+                - if @user.skype.present?
+                  .gl-mb-1
+                    = sprite_icon('skype', css_class: 'fgray')
+                    = link_to @user.skype, "skype:#{@user.skype}", class: 'gl-text-gray-900', title: "Skype"
+                - if @user.linkedin.present?
+                  .gl-mb-1
+                    = sprite_icon('linkedin', css_class: 'fgray')
+                    = link_to @user.linkedin, linkedin_url(@user), class: 'gl-text-gray-900', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow'
+                - if @user.twitter.present?
+                  .gl-mb-1
+                    = sprite_icon('twitter', css_class: 'fgray')
+                    = link_to @user.twitter, twitter_url(@user), class: 'gl-text-gray-900', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow'
+                - if Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?
+                  .gl-mb-1
+                    = sprite_icon('mastodon', css_class: 'fgray')
+                    = link_to @user.mastodon, mastodon_url(@user), class: 'gl-text-gray-900', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow'
+                - if @user.discord.present?
+                  .gl-mb-1
+                    = sprite_icon('discord', css_class: 'fgray')
+                    = link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
+
+              .cover-controls.gl-display-inline-flex.gl-gap-3.gl-mt-5
+                = render 'users/follow_user'
+                -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
+                - if @user == current_user
+                  = render Pajamas::ButtonComponent.new(href: profile_path,
+                    button_options: { class: 'gl-flex-grow-1', title: s_('UserProfile|Edit profile') }) do
+                    = s_("UserProfile|Edit profile")
+                = render 'users/view_gpg_keys'
+                = render 'users/view_user_in_admin_area'
+                .js-user-profile-actions{ data: user_profile_actions_data(@user) }
+
+
+
+
+
+
+
+      - if !profile_tabs.empty? && !Feature.enabled?(:profile_tabs_vue, current_user)
+        .scrolling-tabs-container{ class: [('gl-display-none' if show_super_sidebar?)] }
+          %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+            = sprite_icon('chevron-lg-left', size: 12)
+          %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+            = sprite_icon('chevron-lg-right', size: 12)
+          %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs.gl-border-b-0
             - if profile_tab?(:overview)
-              #js-overview.tab-pane
-                = render "users/overview"
-
+              %li.js-overview-tab
+                = link_to user_path, data: { target: 'div#js-overview', action: 'overview', toggle: 'tab' } do
+                  = s_('UserProfile|Overview')
             - if profile_tab?(:activity)
-              #activity.tab-pane
-                .flash-container
-                - if can?(current_user, :read_cross_project)
-                  %h4.gl-mt-0
-                    = s_('UserProfile|Most Recent Activity')
-                  .content_list{ data: { href: user_activity_path } }
-                  .loading
-                    = gl_loading_icon(size: 'md')
-            - unless @user.bot?
+              %li.js-activity-tab
+                = link_to user_activity_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
+                  = s_('UserProfile|Activity')
+            - unless Feature.enabled?(:security_auto_fix) && @user.bot?
               - if profile_tab?(:groups)
-                #groups.tab-pane
-                  -# This tab is always loaded via AJAX
-
+                %li.js-groups-tab
+                  = link_to user_groups_path, data: { target: 'div#groups', action: 'groups', toggle: 'tab', endpoint: user_groups_path(format: :json) } do
+                    = s_('UserProfile|Groups')
               - if profile_tab?(:contributed)
-                #contributed.tab-pane
-                  -# This tab is always loaded via AJAX
-
+                %li.js-contributed-tab
+                  = link_to user_contributed_projects_path, data: { target: 'div#contributed', action: 'contributed', toggle: 'tab', endpoint: user_contributed_projects_path(format: :json) } do
+                    = s_('UserProfile|Contributed projects')
               - if profile_tab?(:projects)
-                #projects.tab-pane
-                  -# This tab is always loaded via AJAX
-
+                %li.js-projects-tab
+                  = link_to user_projects_path, data: { target: 'div#projects', action: 'projects', toggle: 'tab', endpoint: user_projects_path(format: :json) } do
+                    = s_('UserProfile|Personal projects')
               - if profile_tab?(:starred)
-                #starred.tab-pane
-                  -# This tab is always loaded via AJAX
-
+                %li.js-starred-tab
+                  = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json) } do
+                    = s_('UserProfile|Starred projects')
               - if profile_tab?(:snippets)
-                #snippets.tab-pane
-                  -# This tab is always loaded via AJAX
-
+                %li.js-snippets-tab
+                  = link_to user_snippets_path, data: { target: 'div#snippets', action: 'snippets', toggle: 'tab', endpoint: user_snippets_path(format: :json) } do
+                    = s_('UserProfile|Snippets')
               - if profile_tab?(:followers)
-                #followers.tab-pane
-                  -# This tab is always loaded via AJAX
-
+                %li.js-followers-tab
+                  = link_to user_followers_path, data: { target: 'div#followers', action: 'followers', toggle: 'tab', endpoint: user_followers_path(format: :json) } do
+                    = s_('UserProfile|Followers')
+                    = gl_badge_tag @user.followers.count, size: :sm
               - if profile_tab?(:following)
-                #following.tab-pane
-                  -# This tab is always loaded via AJAX
-
-          .loading.hide
-            .gl-spinner.gl-spinner-md
-
-        - if profile_tabs.empty?
-          .svg-content
-            = image_tag 'illustrations/profile_private_mode.svg'
-          .text-content.text-center
-            %h4
-              - if @user.blocked?
-                = s_('UserProfile|This user is blocked')
-              - else
-                = s_('UserProfile|This user has a private profile')
+                %li.js-following-tab
+                  = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json), qa_selector: 'following_tab' } do
+                    = s_('UserProfile|Following')
+                    = gl_badge_tag @user.followees.count, size: :sm
+
+    .user-profile-content
+      - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
+        #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
+      - unless Feature.enabled?(:profile_tabs_vue, current_user)
+        .tab-content.gl-mt-5.gl-overflow-hidden
+          - if profile_tab?(:overview)
+            #js-overview.tab-pane
+              = render "users/overview"
+
+          - if profile_tab?(:activity)
+            #activity.tab-pane
+              .flash-container
+              - if can?(current_user, :read_cross_project)
+                %h4.gl-mt-0
+                  = s_('UserProfile|Most Recent Activity')
+                .content_list{ data: { href: user_activity_path } }
+                .loading
+                  = gl_loading_icon(size: 'md')
+          - unless @user.bot?
+            - if profile_tab?(:groups)
+              #groups.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:contributed)
+              #contributed.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:projects)
+              #projects.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:starred)
+              #starred.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:snippets)
+              #snippets.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:followers)
+              #followers.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:following)
+              #following.tab-pane
+                -# This tab is always loaded via AJAX
+
+        .loading.hide
+          .gl-spinner.gl-spinner-md
+
+      - if profile_tabs.empty?
+        .svg-content
+          = image_tag 'illustrations/profile_private_mode.svg'
+        .text-content.text-center
+          %h4
+            - if @user.blocked?
+              = s_('UserProfile|This user is blocked')
+            - else
+              = s_('UserProfile|This user has a private profile')
-- 
GitLab


From 4d870c9bbad9938e05408a6a34608e461303c43b Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 26 Oct 2023 14:09:34 +0200
Subject: [PATCH 12/21] Adding 3 projects back to profile (card layout)

---
 .../javascripts/pages/users/user_tabs.js      |   4 +
 .../actions/components/user_actions_app.vue   |   1 -
 app/controllers/users_controller.rb           |   3 +-
 app/views/shared/projects/_list.html.haml     |  30 +++--
 .../shared/projects/_project-card.html.haml   | 113 ++++++++++++++++++
 app/views/users/_overview.html.haml           |  25 ++--
 app/views/users/show.html.haml                |   6 +-
 7 files changed, 152 insertions(+), 30 deletions(-)
 create mode 100644 app/views/shared/projects/_project-card.html.haml

diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index d8abd7a96e3fca..996d767a59cc1a 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -216,6 +216,10 @@ export default class UserTabs {
       requestParams: { limit: 15 },
     });
 
+    UserTabs.renderMostRecentBlocks('#js-overview .projects-block', {
+      requestParams: { limit: 3, skip_pagination: true, skip_namespace: true, card_mode: true },
+    });
+
     this.loaded.overview = true;
   }
 
diff --git a/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue b/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
index f994cad6881b61..aacb885dbf475f 100644
--- a/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
+++ b/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
@@ -86,7 +86,6 @@ export default {
     <gl-disclosure-dropdown
       data-testid="user-profile-actions"
       icon="ellipsis_v"
-      category="tertiary"
       no-caret
       :items="dropdownItems"
     />
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 88a8851607b21a..0d8a14acbd0c72 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -143,13 +143,14 @@ def present_projects
     skip_pagination = Gitlab::Utils.to_boolean(params[:skip_pagination])
     skip_namespace = Gitlab::Utils.to_boolean(params[:skip_namespace])
     compact_mode = Gitlab::Utils.to_boolean(params[:compact_mode])
+    card_mode = Gitlab::Utils.to_boolean(params[:card_mode])
 
     respond_to do |format|
       format.html { render 'show' }
       format.json do
         projects = yield
 
-        pager_json("shared/projects/_list", projects.count, projects: projects, skip_pagination: skip_pagination, skip_namespace: skip_namespace, compact_mode: compact_mode)
+        pager_json("shared/projects/_list", projects.count, projects: projects, skip_pagination: skip_pagination, skip_namespace: skip_namespace, compact_mode: compact_mode, card_mode: card_mode)
       end
     end
   end
diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml
index 74c325383a1a77..a7b33c77df06da 100644
--- a/app/views/shared/projects/_list.html.haml
+++ b/app/views/shared/projects/_list.html.haml
@@ -10,7 +10,8 @@
 - remote = false unless local_assigns[:remote] == true
 - skip_pagination = false unless local_assigns[:skip_pagination] == true
 - compact_mode = false unless local_assigns[:compact_mode] == true
-- css_classes = "#{'compact' if compact_mode} #{'explore' if explore_projects_tab?}"
+- card_mode = false unless local_assigns[:card_mode] == true
+- css_classes = "#{'compact' if compact_mode} #{'gl-display-flex gl-gap-4' if card_mode} #{'explore' if explore_projects_tab?}"
 - contributed_projects_current_user_empty_message_header = s_('UserProfile|Explore public groups to find projects to contribute to.')
 - contributed_projects_visitor_empty_message = s_('UserProfile|This user hasn\'t contributed to any projects')
 - starred_projects_illustration_path = 'illustrations/empty-state/empty-projects-starred-md.svg'
@@ -33,14 +34,25 @@
     - load_pipeline_status(projects) if pipeline_status
     - load_max_project_member_accesses(projects) # Prime cache used in shared/projects/project view rendered below
     - load_catalog_resources(projects)
-    %ul.projects-list.gl-text-secondary.gl-w-full.gl-my-2{ class: css_classes }
-      - projects.each_with_index do |project, i|
-        - css_class = (i >= projects_limit) || project.pending_delete? ? 'hide' : nil
-        = render "shared/projects/project", project: project, skip_namespace: skip_namespace,
-          avatar: avatar, stars: stars, css_class: css_class, use_creator_avatar: use_creator_avatar,
-          forks: able_to_see_forks_count?(project, user), show_last_commit_as_description: show_last_commit_as_description,
-          user: user, merge_requests: able_to_see_merge_requests?(project, user), issues: able_to_see_issues?(project, user),
-          pipeline_status: pipeline_status, compact_mode: compact_mode
+
+    - if card_mode
+      .projects-list.gl-text-secondary.gl-w-full{ class: css_classes }
+        - projects.each_with_index do |project, i|
+          - css_class = (i >= projects_limit) || project.pending_delete? ? 'hide' : nil
+          = render "shared/projects/project-card", project: project, skip_namespace: skip_namespace,
+            avatar: avatar, stars: stars, css_class: css_class, use_creator_avatar: use_creator_avatar,
+            forks: able_to_see_forks_count?(project, user), show_last_commit_as_description: show_last_commit_as_description,
+            user: user, merge_requests: able_to_see_merge_requests?(project, user), issues: able_to_see_issues?(project, user),
+            pipeline_status: pipeline_status, compact_mode: compact_mode
+    - else
+      %ul.projects-list.gl-text-secondary.gl-w-full.gl-my-2{ class: css_classes }
+        - projects.each_with_index do |project, i|
+          - css_class = (i >= projects_limit) || project.pending_delete? ? 'hide' : nil
+          = render "shared/projects/project", project: project, skip_namespace: skip_namespace,
+            avatar: avatar, stars: stars, css_class: css_class, use_creator_avatar: use_creator_avatar,
+            forks: able_to_see_forks_count?(project, user), show_last_commit_as_description: show_last_commit_as_description,
+            user: user, merge_requests: able_to_see_merge_requests?(project, user), issues: able_to_see_issues?(project, user),
+            pipeline_status: pipeline_status, compact_mode: compact_mode
     = paginate_collection(projects, remote: remote) unless skip_pagination
   - else
     - if @contributed_projects
diff --git a/app/views/shared/projects/_project-card.html.haml b/app/views/shared/projects/_project-card.html.haml
new file mode 100644
index 00000000000000..e48e81e422ada7
--- /dev/null
+++ b/app/views/shared/projects/_project-card.html.haml
@@ -0,0 +1,113 @@
+- avatar = true unless local_assigns[:avatar] == false
+- stars = true unless local_assigns[:stars] == false
+- forks = true unless local_assigns[:forks] == false
+- merge_requests = true unless local_assigns[:merge_requests] == false
+- issues = true unless local_assigns[:issues] == false
+- pipeline_status = true unless local_assigns[:pipeline_status] == false
+- skip_namespace = false unless local_assigns[:skip_namespace] == true
+- access = max_project_member_access(project)
+- compact_mode = false unless local_assigns[:compact_mode] == true
+- show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true && can_show_last_commit_in_list?(project)
+- css_class = "gl-sm-display-flex gl-align-items-center gl-vertical-align-middle!" if project.description.blank? && !show_last_commit_as_description
+- updated_tooltip = time_ago_with_tooltip(project.last_activity_date)
+- show_pipeline_status_icon = pipeline_status && can?(current_user, :read_cross_project) && project.pipeline_status.has_status? && can?(current_user, :read_build, project)
+- last_pipeline = last_pipeline_from_status_cache(project) if show_pipeline_status_icon
+- css_controls_class = "with-pipeline-status" if show_pipeline_status_icon && last_pipeline.present?
+- css_metadata_classes = "gl-display-flex gl-align-items-center gl-ml-0! gl-reset-color! icon-wrapper has-tooltip"
+
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-justify-content-space-between gl-flex-basis-third gl-flex-grow-1 gl-mt-0' }, header_options: { class: 'gl-new-card-header gl-flex-grow-1 gl-align-items-flex-start gl-justify-content-start gl-border-b-0' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    - if avatar
+      = link_to project_path(project), class: dom_class(project) do
+        - if project.creator && use_creator_avatar
+          = render Pajamas::AvatarComponent.new(project.creator, size: 48, alt: '', class: 'gl-mr-5')
+        - else
+          = render Pajamas::AvatarComponent.new(project, size: 48, alt: '', class: 'gl-mr-5')
+
+    .gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-pt-2
+      %h2.gl-font-base.gl-line-height-20.gl-my-0.gl-flex-basis-full
+        = link_to project_path(project), class: 'text-plain gl-mr-3 js-prefetch-document', title: project.name do
+          %span.namespace-name.gl-font-weight-normal
+            - if project.namespace && !skip_namespace
+              = project.namespace.human_name
+              \/
+          %span.project-name<
+            = project.name
+
+      = visibility_level_content(project, css_class: 'gl-mr-3')
+
+      - if project.catalog_resource
+        = render partial: 'shared/ci_catalog_badge', locals: { href: project_ci_catalog_resource_path(project, project.catalog_resource) }
+
+      - if explore_projects_tab? && project_license_name(project)
+        %span.gl-display-inline-flex.gl-align-items-center.gl-mr-3
+          = sprite_icon('scale', size: 14, css_class: 'gl-mr-2')
+          = project_license_name(project)
+
+      - if !explore_projects_tab? && access&.nonzero?
+        -# haml-lint:disable UnnecessaryStringOutput
+        = ' ' # prevent haml from eating the space between elements
+        %span.user-access-role.gl-display-block.gl-m-0{ data: { testid: 'user-role-content' } }= localized_project_human_access(access)
+
+      - if !explore_projects_tab?
+        = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: project, additional_classes: 'gl-ml-3!'
+  - c.with_body do
+    .project-details.gl-pr-9.gl-sm-pr-0.gl-w-full.gl-display-flex.gl-flex-direction-column{ data: { testid: 'project-content', qa_project_name: project.name } }
+      - if show_last_commit_as_description
+        .description.gl-display-none.gl-sm-display-block.gl-overflow-hidden.gl-mr-3.gl-mt-2.gl-font-sm
+          = link_to_markdown(project.commit.title, project_commit_path(project, project.commit), class: "commit-row-message")
+      - elsif project.description.present?
+        .description.gl-display-none.gl-sm-display-block.gl-overflow-hidden.gl-mr-3.gl-mt-2.gl-font-sm
+          = markdown_field(project, :description)
+
+      - if project.topics.any?
+        .gl-mt-2
+          = render "shared/projects/topics", project: project.present(current_user: current_user)
+
+      = render_if_exists 'shared/projects/removed', project: project
+
+      .gl-display-flex.gl-mt-3{ class: "#{css_class} gl-sm-display-none!" }
+        .controls.gl-display-flex.gl-align-items-center
+          - if show_pipeline_status_icon && last_pipeline.present?
+            - pipeline_path = pipelines_project_commit_path(project.pipeline_status.project, project.pipeline_status.sha, ref: project.pipeline_status.ref)
+            %span.icon-wrapper.pipeline-status
+              = render 'ci/status/icon', status: last_pipeline.detailed_status(current_user), tooltip_placement: 'top', path: pipeline_path
+
+          = render_if_exists 'shared/projects/archived', project: project
+          - if stars
+            = link_to project_starrers_path(project), class: "#{css_metadata_classes} stars", title: _('Stars'), data: { container: 'body', placement: 'top' } do
+              = sprite_icon('star-o', size: 14, css_class: 'gl-mr-2')
+              = badge_count(project.star_count)
+        .updated-note.gl-font-sm.gl-ml-3.gl-sm-ml-0
+          %span
+            = _('Updated')
+            = updated_tooltip
+
+    .project-controls.gl-display-flex.gl-flex-direction-column.gl-align-items-flex-start.gl-w-full{ data: { testid: 'project_controls'} }
+      .controls.gl-display-flex.gl-align-items-center.gl-gap-4.gl-mb-2{ class: "#{css_controls_class} gl-pr-0!" }
+        - if show_pipeline_status_icon && last_pipeline.present?
+          - pipeline_path = pipelines_project_commit_path(project.pipeline_status.project, project.pipeline_status.sha, ref: project.pipeline_status.ref)
+          %span.icon-wrapper.pipeline-status
+            = render 'ci/status/icon', status: last_pipeline.detailed_status(current_user), tooltip_placement: 'top', path: pipeline_path
+
+        = render_if_exists 'shared/projects/archived', project: project
+        - if stars
+          = link_to project_starrers_path(project), class: "#{css_metadata_classes} stars", title: _('Stars'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('star-o', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.star_count)
+        - if show_count?(disabled: !forks, compact_mode: compact_mode)
+          = link_to project_forks_path(project), class: "#{css_metadata_classes} forks", title: _('Forks'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('fork', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.forks_count)
+        - if show_count?(disabled: !merge_requests, compact_mode: compact_mode)
+          = link_to project_merge_requests_path(project), class: "#{css_metadata_classes} merge-requests", title: _('Merge requests'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('git-merge', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.open_merge_requests_count)
+        - if show_count?(disabled: !issues, compact_mode: compact_mode)
+          = link_to project_issues_path(project), class: "#{css_metadata_classes} issues", title: _('Issues'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('issues', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.open_issues_count)
+      .updated-note.gl-font-sm.gl-white-space-nowrap.gl-justify-content-start
+        %span
+          = _('Updated')
+          = updated_tooltip
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 35519754a022eb..cbe9f4c5f5d4d5 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -1,23 +1,16 @@
 - activity_pane_class = Feature.enabled?(:security_auto_fix) && @user.bot? ? "col-12" : "col-md-12 col-lg-6 gl-align-self-start"
 
+- unless Feature.enabled?(:security_auto_fix) && @user.bot?
+  .projects-block.gl-mt-6
+    .gl-display-flex.gl-align-items-center
+      %h4.gl-flex-grow-1
+        = s_('UserProfile|Personal projects')
+      = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
+    .overview-content-list{ data: { href: user_projects_path } }
+      = gl_loading_icon(size: 'md', css_class: 'loading')
 
 - if can?(current_user, :read_cross_project)
-  - if @user.user_readme&.rich_viewer
-    .profile-readme.justify-content-center.gl-border.gl-rounded-base.gl-px-6.gl-mb-5.gl-overflow-y-auto
-      .gl-my-6
-        .gl-display-flex
-          %ol.breadcrumb.gl-breadcrumb-list.gl-mb-4
-            %li.gl-breadcrumb-item
-              = link_to project_path(@user.user_project) do
-                = @user.username
-            %li.gl-breadcrumb-item
-              = link_to @user.user_readme.path, @user.user_project.readme_url
-          - if current_user == @user
-            .gl-ml-auto
-              = link_to _('Edit'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
-        = render 'projects/blob/viewer', viewer: @user.user_readme.rich_viewer, load_async: false
-
-  .activities-block
+  .activities-block.gl-mt-6
     .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid.gl-mb-4
       %h4.gl-flex-grow-1
         = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 3341f90c3c65ec..904292026f2da5 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -17,7 +17,7 @@
 %div{ class: container_class }
   .user-profile
     .user-profile-sidebar
-      .profile-header.gl-pt-5{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
+      .profile-header.gl-pt-6{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
 
         - if profile_tab?(:activity)
           #activity.tab-pane
@@ -191,7 +191,7 @@
                     = s_('UserProfile|Personal projects')
               - if profile_tab?(:starred)
                 %li.js-starred-tab
-                  = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json) } do
+                  = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json), card_mode: true } do
                     = s_('UserProfile|Starred projects')
               - if profile_tab?(:snippets)
                 %li.js-snippets-tab
@@ -212,7 +212,7 @@
       - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
         #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
       - unless Feature.enabled?(:profile_tabs_vue, current_user)
-        .tab-content.gl-mt-5.gl-overflow-hidden
+        .tab-content.gl-mt-6.gl-overflow-hidden
           - if profile_tab?(:overview)
             #js-overview.tab-pane
               = render "users/overview"
-- 
GitLab


From 4552d6b9ceed13159c2e011076f422319e501008 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Fri, 27 Oct 2023 11:28:51 +0200
Subject: [PATCH 13/21] Hide projects if there aren't any, fix specs

---
 .../pages/users/user_overview_block.js        |   7 +-
 .../stylesheets/page_bundles/profile.scss     | 123 +-----------------
 app/views/shared/projects/_list.html.haml     |   2 +-
 .../shared/projects/_project-card.html.haml   |   2 +-
 app/views/users/_overview.html.haml           |   4 +-
 app/views/users/show.html.haml                |  23 +---
 spec/features/users/overview_spec.rb          |  10 +-
 spec/features/users/rss_spec.rb               |   4 +-
 spec/features/users/show_spec.rb              |   8 +-
 9 files changed, 32 insertions(+), 151 deletions(-)

diff --git a/app/assets/javascripts/pages/users/user_overview_block.js b/app/assets/javascripts/pages/users/user_overview_block.js
index 8d2d66d812e840..48c5e9a6c12d9e 100644
--- a/app/assets/javascripts/pages/users/user_overview_block.js
+++ b/app/assets/javascripts/pages/users/user_overview_block.js
@@ -16,7 +16,12 @@ export default class UserOverviewBlock {
 
   loadData() {
     const containerEl = document.querySelector(this.container);
-    const loadingEl = containerEl.querySelector(`.loading`);
+
+    if (!containerEl) {
+      return;
+    }
+
+    const loadingEl = containerEl.querySelector('.loading');
 
     loadingEl.classList.remove('hide');
 
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index d47a7215e46379..078c86d2bbd0e8 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -29,20 +29,10 @@
   }
 }
 
-// .calendar-block {
-//   padding-left: 0;
-//   padding-right: 0;
-//   border-top: 0;
-
-//   @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-//     overflow-x: auto;
-//   }
-// }
-
 .calendar-legend,
 .calendar-hint {
   position: relative;
-  z-index: 2;
+  z-index: 1;
   direction: ltr;
   margin-top: -36px;
 }
@@ -64,84 +54,6 @@
   }
 }
 
-// .cover-block {
-//   text-align: center;
-//   background: var(--gray-50, $gray-light);
-//   padding-top: 44px;
-//   position: relative;
-
-//   .avatar-holder {
-//     .avatar,
-//     .identicon {
-//       margin: 0 auto;
-//       float: none;
-//     }
-
-//     .identicon {
-//       border-radius: 50%;
-//     }
-//   }
-
-//   .cover-title {
-//     color: var(--gl-text-color, $gl-text-color);
-//     font-size: 23px;
-
-//     h1 {
-//       color: var(--gl-text-color, $gl-text-color);
-//       margin-bottom: 6px;
-//       font-size: 23px;
-//     }
-
-//     .visibility-icon {
-//       display: inline-block;
-//       margin-left: 5px;
-//       font-size: 18px;
-//       color: color('gray');
-//     }
-
-//     p {
-//       padding: 0 $gl-padding;
-//       color: var(--gl-text-color, $gl-text-color);
-//     }
-//   }
-
-//   .cover-controls {
-//     @include media-breakpoint-up(sm) {
-//       position: absolute;
-//       top: 1rem;
-//       right: 1.25rem;
-//     }
-
-//     &.left {
-//       @include media-breakpoint-up(sm) {
-//         left: 1.25rem;
-//         right: auto;
-//       }
-//     }
-//   }
-
-//   &.user-cover-block {
-//     padding: 24px 0 0;
-
-//     .nav-links {
-//       width: 100%;
-//       float: none;
-
-//       &.scrolling-tabs {
-//         float: none;
-//       }
-//     }
-
-//     li:first-child {
-//       margin-left: auto;
-//     }
-
-//     li:last-child {
-//       margin-right: auto;
-//     }
-//   }
-// }
-
 // Middle dot divider between each element in a list of items.
 .middle-dot-divider {
   @include middle-dot-divider;
@@ -158,15 +70,6 @@
   max-width: 600px;
 }
 
-// .user-calendar {
-//   text-align: center;
-//   min-height: 172px;
-
-//   .calendar {
-//     display: inline-block;
-//   }
-// }
-
 .profile-readme {
   max-height: 320px;
 }
@@ -188,16 +91,6 @@
   .profile-header {
     position: sticky;
     top: $calc-application-header-height;
-
-  //   margin: 0 $gl-padding;
-
-  //   &.with-no-profile-tabs {
-  //     margin-bottom: $gl-padding-24;
-  //   }
-
-  //   .avatar-holder {
-  //     margin: 0 auto 10px;
-  //   }
   }
 
   .user-profile-nav {
@@ -226,17 +119,7 @@
     }
   }
 
-  // .projects-block {
-  //   @include media-breakpoint-up(lg) {
-  //     margin-left: 5px;
-  //   }
-  // }
-
   @include media-breakpoint-down(xs) {
-    // .cover-block {
-    //   padding-top: 20px;
-    // }
-
     .user-profile-nav {
       a {
         margin-right: 0;
@@ -308,6 +191,10 @@
   }
 }
 
+.user-profile-sidebar {
+  z-index: 2;
+}
+
 .user-profile-sidebar,
 .user-profile-content {
   min-width: 1px; // grid overflow fix
diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml
index a7b33c77df06da..25a45d18f182c4 100644
--- a/app/views/shared/projects/_list.html.haml
+++ b/app/views/shared/projects/_list.html.haml
@@ -11,7 +11,7 @@
 - skip_pagination = false unless local_assigns[:skip_pagination] == true
 - compact_mode = false unless local_assigns[:compact_mode] == true
 - card_mode = false unless local_assigns[:card_mode] == true
-- css_classes = "#{'compact' if compact_mode} #{'gl-display-flex gl-gap-4' if card_mode} #{'explore' if explore_projects_tab?}"
+- css_classes = "#{'compact' if compact_mode} #{'gl-display-flex gl-gap-4 gl-overflow-x-auto' if card_mode} #{'explore' if explore_projects_tab?}"
 - contributed_projects_current_user_empty_message_header = s_('UserProfile|Explore public groups to find projects to contribute to.')
 - contributed_projects_visitor_empty_message = s_('UserProfile|This user hasn\'t contributed to any projects')
 - starred_projects_illustration_path = 'illustrations/empty-state/empty-projects-starred-md.svg'
diff --git a/app/views/shared/projects/_project-card.html.haml b/app/views/shared/projects/_project-card.html.haml
index e48e81e422ada7..84a8365c973b3c 100644
--- a/app/views/shared/projects/_project-card.html.haml
+++ b/app/views/shared/projects/_project-card.html.haml
@@ -24,7 +24,7 @@
         - else
           = render Pajamas::AvatarComponent.new(project, size: 48, alt: '', class: 'gl-mr-5')
 
-    .gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-pt-2
+    .gl-display-flex.gl-flex-wrap.gl-pt-2
       %h2.gl-font-base.gl-line-height-20.gl-my-0.gl-flex-basis-full
         = link_to project_path(project), class: 'text-plain gl-mr-3 js-prefetch-document', title: project.name do
           %span.namespace-name.gl-font-weight-normal
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index cbe9f4c5f5d4d5..0ebf573c969d0f 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -1,7 +1,7 @@
 - activity_pane_class = Feature.enabled?(:security_auto_fix) && @user.bot? ? "col-12" : "col-md-12 col-lg-6 gl-align-self-start"
 
 - unless Feature.enabled?(:security_auto_fix) && @user.bot?
-  .projects-block.gl-mt-6
+  .projects-block.gl-mt-5
     .gl-display-flex.gl-align-items-center
       %h4.gl-flex-grow-1
         = s_('UserProfile|Personal projects')
@@ -10,7 +10,7 @@
       = gl_loading_icon(size: 'md', css_class: 'loading')
 
 - if can?(current_user, :read_cross_project)
-  .activities-block.gl-mt-6
+  .activities-block.gl-mt-5
     .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid.gl-mb-4
       %h4.gl-flex-grow-1
         = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 904292026f2da5..45ccd68cd81e66 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -38,15 +38,13 @@
         = link_to avatar_icon_for_user(@user, 400, current_user: current_user), class: "user-profile-image gl-display-block", target: '_blank', rel: 'noopener noreferrer' do
           = render Pajamas::AvatarComponent.new(@user, alt: "", size: 96, avatar_options: { itemprop: "image" })
 
-
         .gl-display-inline-block.gl-vertical-align-top.gl-text-left.gl-max-w-80
           - if @user.blocked? || !@user.confirmed?
             .user-info
               %h1.gl-font-size-h-display.gl-line-height-1
                 %p.gl-mr-2.gl-mb-0
                   = user_display_name(@user)
-              - if can?(current_user, :read_user_profile, @user)
-                %span.gl-text-gray-600.gl-font-weight-normal.gl-mt-0
+                %span.gl-text-gray-600.gl-font-weight-normal.gl-mb-0
                   @#{@user.username}
 
           - else
@@ -54,9 +52,8 @@
               %h1.gl-font-size-h-display.gl-line-height-1{ itemprop: 'name' }
                 %p.gl-mr-2.gl-mb-0
                   = @user.name
-                - if can?(current_user, :read_user_profile, @user)
-                  %span.gl-text-gray-600.gl-font-weight-normal.gl-mb-0
-                    @#{@user.username}
+                %span.gl-text-gray-600.gl-font-weight-normal.gl-mb-0
+                  @#{@user.username}
                 - if @user.status&.busy?
                   = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
 
@@ -86,10 +83,9 @@
                 %p.profile-user-bio.gl-mt-5
                   = @user.bio
 
-
               - user_local_time = local_time(@user.timezone)
               - if @user.location.present? || user_local_time.present? || work_information(@user).present?
-                .gl-mt-5
+                .gl-mt-5{ itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' }
                   %h3.h5.gl-mb-2= s_('UserProfile|Info')
                   - if @user.location.present?
                     .gl-mb-1
@@ -97,7 +93,7 @@
                       %span{ itemprop: 'addressLocality' }
                         = @user.location
                   - if user_local_time.present?
-                    .gl-mb-1
+                    .gl-mb-1{ data: { testid: 'user-local-time' } }
                       = sprite_icon('clock', css_class: 'fgray')
                       %span
                         = user_local_time
@@ -109,7 +105,6 @@
                   = sprite_icon('calendar', css_class: 'fgray')
                   = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
 
-
               .gl-text-gray-900.gl-mt-5
                 - if @user.website_url.present? || display_public_email?(@user) || @user.skype.present? || @user.linkedin.present? || @user.twitter.present? || (Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?) || @user.discord.present?
                   %h3.h5.gl-mb-2= s_('UserProfile|Social')
@@ -155,12 +150,6 @@
                 = render 'users/view_user_in_admin_area'
                 .js-user-profile-actions{ data: user_profile_actions_data(@user) }
 
-
-
-
-
-
-
       - if !profile_tabs.empty? && !Feature.enabled?(:profile_tabs_vue, current_user)
         .scrolling-tabs-container{ class: [('gl-display-none' if show_super_sidebar?)] }
           %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
@@ -212,7 +201,7 @@
       - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
         #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
       - unless Feature.enabled?(:profile_tabs_vue, current_user)
-        .tab-content.gl-mt-6.gl-overflow-hidden
+        .tab-content.gl-overflow-hidden
           - if profile_tab?(:overview)
             #js-overview.tab-pane
               = render "users/overview"
diff --git a/spec/features/users/overview_spec.rb b/spec/features/users/overview_spec.rb
index 1da61ecb86861d..1d7402176311c9 100644
--- a/spec/features/users/overview_spec.rb
+++ b/spec/features/users/overview_spec.rb
@@ -111,7 +111,7 @@ def push_code_contribution
 
       it 'shows one entry in the list of projects' do
         page.within('.projects-block') do
-          expect(page).to have_selector('.project-row', count: 1)
+          expect(page).to have_selector('.gl-card', count: 1)
         end
       end
 
@@ -119,9 +119,9 @@ def push_code_contribution
         expect(find('#js-overview .projects-block')).to have_selector('.js-view-all', visible: true)
       end
 
-      it 'shows projects in "compact mode"' do
+      it 'shows projects in "card mode"' do
         page.within('#js-overview .projects-block') do
-          expect(find('.js-projects-list-holder')).to have_selector('.compact')
+          expect(find('.js-projects-list-holder')).to have_css('.gl-card')
         end
       end
     end
@@ -135,9 +135,9 @@ def push_code_contribution
 
       include_context 'visit overview tab'
 
-      it 'shows max. ten entries in the list of projects' do
+      it 'shows max. 3 entries in the list of projects' do
         page.within('.projects-block') do
-          expect(page).to have_selector('.project-row', count: 10)
+          expect(page).to have_selector('.gl-card', count: 3)
         end
       end
 
diff --git a/spec/features/users/rss_spec.rb b/spec/features/users/rss_spec.rb
index 730c31df899f8e..d71197d2f22ca9 100644
--- a/spec/features/users/rss_spec.rb
+++ b/spec/features/users/rss_spec.rb
@@ -13,7 +13,7 @@
     end
 
     it 'shows the RSS link with overflow menu', :js do
-      page.within('.user-cover-block') do
+      page.within('.user-profile-sidebar') do
         find_by_testid('base-dropdown-toggle').click
       end
 
@@ -27,7 +27,7 @@
     end
 
     it 'has an RSS without a feed token', :js do
-      page.within('.user-cover-block') do
+      page.within('.user-profile-sidebar') do
         find_by_testid('base-dropdown-toggle').click
       end
 
diff --git a/spec/features/users/show_spec.rb b/spec/features/users/show_spec.rb
index 2821e8286a45f3..3fb499990ac15a 100644
--- a/spec/features/users/show_spec.rb
+++ b/spec/features/users/show_spec.rb
@@ -12,7 +12,7 @@
   it 'shows copy user id action in the dropdown', :js do
     subject
 
-    page.within('.user-cover-block') do
+    page.within('.user-info') do
       find_by_testid('base-dropdown-toggle').click
     end
 
@@ -305,7 +305,7 @@
     end
 
     it 'shows user name as blocked' do
-      expect(page).to have_css(".cover-title", text: 'Blocked user')
+      expect(page).to have_css(".user-info", text: 'Blocked user')
     end
 
     it 'shows no additional fields' do
@@ -343,7 +343,7 @@
       end
 
       it 'shows user name as unconfirmed' do
-        expect(page).to have_css(".cover-title", text: 'Unconfirmed user')
+        expect(page).to have_css(".user-info", text: 'Unconfirmed user')
       end
 
       it 'shows no tab' do
@@ -393,7 +393,7 @@
 
     subject
 
-    expect(page).to have_content("(they/them)")
+    expect(page).to have_content("Pronouns: they/them")
   end
 
   it 'shows the pronunctiation of the user if there was one' do
-- 
GitLab


From f299424e0096ed06c1c2e704c6fada46e4d09c2c Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Fri, 27 Oct 2023 16:04:09 +0200
Subject: [PATCH 14/21] Remove unused code

---
 .../pages/users/activity_calendar.js          | 20 -------------------
 .../javascripts/pages/users/user_tabs.js      |  1 -
 2 files changed, 21 deletions(-)

diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index ba8c9e6c5a5e0c..55cc77dc1628c1 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -131,7 +131,6 @@ export default class ActivityCalendar {
     this.renderDays();
     this.renderMonths();
     this.renderDayTitles();
-    // this.renderKey();
   }
 
   // Add extra padding for the last month label if it is also the last column
@@ -257,25 +256,6 @@ export default class ActivityCalendar {
       .text((date) => this.monthNames[date.month]);
   }
 
-  // renderKey() {
-  //   this.svg
-  //     .append('g')
-  //     .attr('transform', `translate(18, ${this.daySizeWithSpace * 8 + 16})`)
-  //     .selectAll('rect')
-  //     .data(CONTRIB_LEGENDS)
-  //     .enter()
-  //     .append('rect')
-  //     .attr('width', this.daySize)
-  //     .attr('height', this.daySize)
-  //     .attr('x', (_, i) => this.daySizeWithSpace * i)
-  //     .attr('y', 0)
-  //     .attr('data-level', (_, i) => i)
-  //     .attr('class', 'user-contrib-cell has-tooltip contrib-legend')
-  //     .attr('title', (x) => x.title)
-  //     .attr('data-container', 'body')
-  //     .attr('data-html', true);
-  // }
-
   clickDay(stamp) {
     if (this.currentSelectedDate !== stamp.date) {
       this.currentSelectedDate = stamp.date;
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 996d767a59cc1a..704b4ca6f32ce6 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -92,7 +92,6 @@ const CALENDAR_TEMPLATE = `
   </div>
 `;
 
-// const CALENDAR_PERIOD_6_MONTHS = 6;
 const CALENDAR_PERIOD_12_MONTHS = 12;
 
 export default class UserTabs {
-- 
GitLab


From d576b95146caf2a799578453087d999ac28f534f Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Fri, 27 Oct 2023 09:21:20 -0600
Subject: [PATCH 15/21] More profile enhancements

Add top padding to all tabs, move achivements to section

- Add border around activity calendar
- Increase size of calendar squares

Only show achievements header if they exist; fix specs

Replace social header with contact

Reduce name text size; display projects in columns on mobile

Remove extra space in emoji status

Incorporate activity design updates; fix conflicts

Move buttons to top of page, change status styles, fix h1

Fix accessibility issues and specs

Move achievements up, restyle pronouns etc
---
 .../pages/users/activity_calendar.js          |   2 +-
 .../profile/components/user_achievements.vue  |   4 +-
 .../actions/components/user_actions_app.vue   |  21 +-
 .../stylesheets/page_bundles/profile.scss     |  12 +-
 app/assets/stylesheets/pages/notes.scss       |   4 +-
 app/views/shared/projects/_list.html.haml     |   2 +-
 app/views/users/_follow_user.html.haml        |  10 +-
 app/views/users/_overview.html.haml           |  76 +++---
 .../users/_view_user_in_admin_area.html.haml  |   2 +-
 app/views/users/show.html.haml                | 241 +++++++++---------
 locale/gitlab.pot                             |  12 +-
 .../profiles/user_visits_profile_spec.rb      |   2 +-
 spec/features/users/rss_spec.rb               |   4 +-
 spec/features/users/show_spec.rb              |  24 +-
 .../_profile_basic_info.html.haml_spec.rb     |  21 --
 15 files changed, 208 insertions(+), 229 deletions(-)
 delete mode 100644 spec/views/users/_profile_basic_info.html.haml_spec.rb

diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 55cc77dc1628c1..dbb0fe585791f7 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -72,7 +72,7 @@ export default class ActivityCalendar {
     this.clickDay = this.clickDay.bind(this);
     this.currentSelectedDate = '';
     this.daySpace = 1;
-    this.daySize = 13;
+    this.daySize = 14;
     this.daySizeWithSpace = this.daySize + this.daySpace * 2;
     this.monthNames = [
       __('Jan'),
diff --git a/app/assets/javascripts/profile/components/user_achievements.vue b/app/assets/javascripts/profile/components/user_achievements.vue
index f27f4b1279ba8d..c5f1b387941f80 100644
--- a/app/assets/javascripts/profile/components/user_achievements.vue
+++ b/app/assets/javascripts/profile/components/user_achievements.vue
@@ -72,7 +72,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-my-3">
+  <div>
     <div
       v-for="userAchievement in userAchievements"
       :key="userAchievement.id"
@@ -85,7 +85,7 @@ export default {
         :size="32"
         tabindex="0"
         shape="rect"
-        class="gl-mx-2 gl-p-1 gl-border-none"
+        class="gl-mr-2 gl-p-1 gl-border-none"
       />
       <br />
       <gl-badge v-if="showCountBadge(userAchievement.count)" variant="info" size="sm">{{
diff --git a/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue b/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
index aacb885dbf475f..dbaf5ed8142182 100644
--- a/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
+++ b/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlDisclosureDropdown } from '@gitlab/ui';
+import { GlButton, GlDisclosureDropdown } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
 
 export default {
   components: {
+    GlButton,
     GlDisclosureDropdown,
     AbuseCategorySelector,
   },
@@ -73,6 +74,7 @@ export default {
     },
   },
   i18n: {
+    userActions: s__('UserProfile|User Actions'),
     userId: s__('UserProfile|Copy user ID: %{id}'),
     userIdCopied: s__('UserProfile|User ID copied to clipboard'),
     rssSubscribe: s__('UserProfile|Subscribe'),
@@ -83,12 +85,17 @@ export default {
 
 <template>
   <span>
-    <gl-disclosure-dropdown
-      data-testid="user-profile-actions"
-      icon="ellipsis_v"
-      no-caret
-      :items="dropdownItems"
-    />
+    <gl-disclosure-dropdown data-testid="user-profile-actions" no-caret :items="dropdownItems">
+      <template #toggle>
+        <gl-button
+          class="gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret"
+          category="tertiary"
+          icon="ellipsis_v"
+          :aria-label="$options.i18n.userActions"
+          :title="$options.i18n.userActions"
+        />
+      </template>
+    </gl-disclosure-dropdown>
     <abuse-category-selector
       v-if="reportedUserId"
       :reported-user-id="reportedUserId"
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index 078c86d2bbd0e8..362acaa3741b59 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -88,9 +88,13 @@
 }
 
 .user-profile {
-  .profile-header {
-    position: sticky;
-    top: $calc-application-header-height;
+  @include media-breakpoint-up(lg) {
+    .profile-header {
+      position: sticky;
+      top: $calc-application-header-height;
+      height: $calc-application-viewport-height;
+      margin-bottom: $content-wrapper-padding;
+    }
   }
 
   .user-profile-nav {
@@ -184,7 +188,7 @@
 }
 
 .user-profile {
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     display: grid;
     grid-template-columns: minmax(240px, 1fr) 3fr;
     gap: 3rem;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 8e0fab04ab29d5..bd95035bf5caab 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -1136,8 +1136,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 }
 
 .user-activity-content {
+  @include gl-relative;
+
   &::before {
-    @include vertical-line(80px, 25px);
+    @include vertical-line(30px, 10px);
     background: var(--gray-50, $gray-50);
   }
 
diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml
index 25a45d18f182c4..572b5e1754549b 100644
--- a/app/views/shared/projects/_list.html.haml
+++ b/app/views/shared/projects/_list.html.haml
@@ -11,7 +11,7 @@
 - skip_pagination = false unless local_assigns[:skip_pagination] == true
 - compact_mode = false unless local_assigns[:compact_mode] == true
 - card_mode = false unless local_assigns[:card_mode] == true
-- css_classes = "#{'compact' if compact_mode} #{'gl-display-flex gl-gap-4 gl-overflow-x-auto' if card_mode} #{'explore' if explore_projects_tab?}"
+- css_classes = "#{'compact' if compact_mode} #{'gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-gap-4 gl-overflow-x-auto' if card_mode} #{'explore' if explore_projects_tab?}"
 - contributed_projects_current_user_empty_message_header = s_('UserProfile|Explore public groups to find projects to contribute to.')
 - contributed_projects_visitor_empty_message = s_('UserProfile|This user hasn\'t contributed to any projects')
 - starred_projects_illustration_path = 'illustrations/empty-state/empty-projects-starred-md.svg'
diff --git a/app/views/users/_follow_user.html.haml b/app/views/users/_follow_user.html.haml
index 71f8a462cbf7bf..953e74c1f27c16 100644
--- a/app/views/users/_follow_user.html.haml
+++ b/app/views/users/_follow_user.html.haml
@@ -1,11 +1,9 @@
-- link_classes = "flex-grow-1 gl-display-inline-block"
-
 - if current_user&.following_users_allowed?(@user)
   - if current_user.following?(@user)
-    = form_tag user_unfollow_path(@user, :json), class: link_classes do
-      = render Pajamas::ButtonComponent.new(type: :submit, button_options: { class: 'gl-w-full', data: { track_action: 'click_button', track_label: 'unfollow_from_profile' } }) do
+    = form_tag user_unfollow_path(@user, :json) do
+      = render Pajamas::ButtonComponent.new(type: :submit, button_options: { data: { track_action: 'click_button', track_label: 'unfollow_from_profile' } }) do
         = _('Unfollow')
   - else
-    = form_tag user_follow_path(@user, :json), class: link_classes do
-      = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { class: 'gl-w-full', data: { testid: 'follow-user-link', track_action: 'click_button', track_label: 'follow_from_profile' } }) do
+    = form_tag user_follow_path(@user, :json) do
+      = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { data: { testid: 'follow-user-link', track_action: 'click_button', track_label: 'follow_from_profile' } }) do
         = _('Follow')
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 0ebf573c969d0f..3a68162504191f 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -1,54 +1,40 @@
-- activity_pane_class = Feature.enabled?(:security_auto_fix) && @user.bot? ? "col-12" : "col-md-12 col-lg-6 gl-align-self-start"
+- if can?(current_user, :read_cross_project) && @user.user_readme&.rich_viewer
+  .profile-readme.justify-content-center.gl-border.gl-rounded-base.gl-py-5.gl-px-6.gl-mb-5.gl-overflow-y-auto
+    .gl-display-flex
+      %ol.breadcrumb.gl-breadcrumb-list.gl-mb-4
+        %li.gl-breadcrumb-item
+          = link_to project_path(@user.user_project) do
+            = @user.username
+        %li.gl-breadcrumb-item
+          = link_to @user.user_readme.path, @user.user_project.readme_url
+      - if current_user == @user
+        .gl-ml-auto
+          = link_to _('Edit'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
+    = render 'projects/blob/viewer', viewer: @user.user_readme.rich_viewer, load_async: false
 
 - unless Feature.enabled?(:security_auto_fix) && @user.bot?
-  .projects-block.gl-mt-5
-    .gl-display-flex.gl-align-items-center
-      %h4.gl-flex-grow-1
+  .projects-block
+    .gl-display-flex.gl-align-items-baseline
+      %h4.gl-font-lg.gl-flex-grow-1
         = s_('UserProfile|Personal projects')
       = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
     .overview-content-list{ data: { href: user_projects_path } }
       = gl_loading_icon(size: 'md', css_class: 'loading')
 
 - if can?(current_user, :read_cross_project)
-  .activities-block.gl-mt-5
-    .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid.gl-mb-4
-      %h4.gl-flex-grow-1
-        = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
-      = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
-    .user-calendar.light{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: local_timezone_instance(@user.timezone).now.utc_offset } }
-      = gl_loading_icon(size: 'md', css_class: 'gl-my-8')
-      .user-calendar-error.invisible
-        = _('There was an error loading users activity calendar.')
-        %a.js-retry-load{ href: '#' }
-          = s_('UserProfile|Retry')
-- if @user.user_readme&.rich_viewer
-  .row.justify-content-center
-    .col-12.col-md-10.col-lg-8.gl-my-6
-      .gl-display-flex
-        %ol.breadcrumb.gl-breadcrumb-list.gl-mb-4
-          %li.gl-breadcrumb-item
-            = link_to project_path(@user.user_project) do
-              = @user.username
-          %li.gl-breadcrumb-item
-            = link_to @user.user_readme.path, @user.user_project.readme_url
-        - if current_user == @user
-          .gl-ml-auto
-            = link_to _('Edit'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
-      = render 'projects/blob/viewer', viewer: @user.user_readme.rich_viewer, load_async: false
-.row
-  .col-12.user-calendar-activities
-.row
-  %div{ class: activity_pane_class }
-    - if can?(current_user, :read_cross_project)
-      .activities-block
-        .gl-mt-5
-          .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid
-            %h4.gl-flex-grow-1
-              = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
-            = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
-          .overview-content-list.user-activity-content{ data: { href: user_activity_path, testid: 'user-activity-content' } }
-            = gl_loading_icon(size: 'md', css_class: 'loading')
+  .gl-align-self-start
+    .activities-block.gl-mt-5
+      .gl-display-flex.gl-align-items-baseline
+        %h4.gl-font-lg.gl-flex-grow-1
+          = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
+        = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
+      .user-calendar.gl-border.light.gl-rounded-base.gl-px-3.gl-pt-4{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: local_timezone_instance(@user.timezone).now.utc_offset } }
+        = gl_loading_icon(size: 'md', css_class: 'gl-my-8')
+        .user-calendar-error.invisible
+          = _('There was an error loading users activity calendar.')
+          %a.js-retry-load{ href: '#' }
+            = s_('UserProfile|Retry')
 
-    .user-calendar-activities
-    .overview-content-list{ data: { href: user_activity_path, testid: 'user-activity-content' } }
-      = gl_loading_icon(size: 'md', css_class: 'loading')
+      .user-calendar-activities
+      .overview-content-list.user-activity-content{ data: { href: user_activity_path, testid: 'user-activity-content' } }
+        = gl_loading_icon(size: 'md', css_class: 'loading')
diff --git a/app/views/users/_view_user_in_admin_area.html.haml b/app/views/users/_view_user_in_admin_area.html.haml
index 36b3c33d8ab362..c8265ac9a9aeaf 100644
--- a/app/views/users/_view_user_in_admin_area.html.haml
+++ b/app/views/users/_view_user_in_admin_area.html.haml
@@ -1,4 +1,4 @@
 - if current_user && current_user.admin?
   = render Pajamas::ButtonComponent.new(href: [:admin, @user],
     icon: 'user',
-    button_options: { class: 'gl-flex-grow-1 has-tooltip', title: s_('UserProfile|View user in admin area'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } })
+    button_options: { class: 'has-tooltip', title: s_('UserProfile|View user in admin area'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } })
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 45ccd68cd81e66..3af908b817f4a5 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -17,139 +17,116 @@
 %div{ class: container_class }
   .user-profile
     .user-profile-sidebar
-      .profile-header.gl-pt-6{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
+      .profile-header.gl-py-6.gl-overflow-y-auto.gl-sm-pr-4{ class: [('with-no-profile-tabs' if profile_tabs.empty?)] }
 
-        - if profile_tab?(:activity)
-          #activity.tab-pane
-            .row
-              .col-12
-                .flash-container
-                - if can?(current_user, :read_cross_project)
-                  %h4.prepend-top-20
-                    = s_('UserProfile|Most Recent Activity')
-                  .content_list.user-activity-content{ data: { href: user_activity_path } }
-                  .loading
-                    = gl_loading_icon(size: 'md')
-        - unless @user.bot?
-          - if profile_tab?(:groups)
-            #groups.tab-pane
-              -# This tab is always loaded via AJAX
-
-        = link_to avatar_icon_for_user(@user, 400, current_user: current_user), class: "user-profile-image gl-display-block", target: '_blank', rel: 'noopener noreferrer' do
+        = link_to avatar_icon_for_user(@user, 400, current_user: current_user), class: "user-profile-image", target: '_blank', rel: 'noopener noreferrer', alt: 'View large avatar' do
           = render Pajamas::AvatarComponent.new(@user, alt: "", size: 96, avatar_options: { itemprop: "image" })
 
-        .gl-display-inline-block.gl-vertical-align-top.gl-text-left.gl-max-w-80
+        .gl-display-inline-block.gl-vertical-align-top.gl-text-left.gl-max-w-80.gl-overflow-wrap-anywhere
           - if @user.blocked? || !@user.confirmed?
             .user-info
-              %h1.gl-font-size-h-display.gl-line-height-1
-                %p.gl-mr-2.gl-mb-0
-                  = user_display_name(@user)
-                %span.gl-text-gray-600.gl-font-weight-normal.gl-mb-0
-                  @#{@user.username}
+              %h1.gl-font-size-h1.gl-line-height-1.gl-mb-1
+                = user_display_name(@user)
+              %h2.gl-font-size-h2.gl-text-gray-600.gl-font-weight-normal.gl-mt-0
+                @#{@user.username}
 
           - else
             .user-info
-              %h1.gl-font-size-h-display.gl-line-height-1{ itemprop: 'name' }
-                %p.gl-mr-2.gl-mb-0
-                  = @user.name
-                %span.gl-text-gray-600.gl-font-weight-normal.gl-mb-0
-                  @#{@user.username}
-                - if @user.status&.busy?
-                  = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
-
-              - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
-                #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
-
-              - if @user.status&.customized?
-                .cover-status.gl-display-inline-flex.gl-align-items-baseline.gl-px-4.gl-py-3.gl-border.gl-bg-gray-10.gl-rounded-6.gl-font-sm
-                  = emoji_icon(@user.status.emoji, class: 'gl-mr-3')
-                  = markdown_field(@user.status, :message)
-
-              - if @user.pronouns.present? || @user.pronunciation.present?
-                .gl-mt-5
-                - if @user.pronouns.present?
-                  .gl-align-items-center
-                    %p.gl-mb-4.gl-text-secondary{ class: 'gl-mb-0!' }
-                      = s_("UserProfile|Pronouns: %{pronouns}") % { pronouns: @user.pronouns }
-
-                - if @user.pronunciation.present?
-                  .gl-align-items-center
-                    %p.gl-mb-4.gl-text-secondary
-                      = s_("UserProfile|Pronounced as: %{pronunciation}") % { pronunciation: @user.pronunciation }
-
-              -# Ensure this stays indented one level less than the social links
-              -# See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/118314
-              - if @user.bio.present? && @user.confirmed? && !@user.blocked?
-                %p.profile-user-bio.gl-mt-5
-                  = @user.bio
-
-              - user_local_time = local_time(@user.timezone)
-              - if @user.location.present? || user_local_time.present? || work_information(@user).present?
-                .gl-mt-5{ itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' }
-                  %h3.h5.gl-mb-2= s_('UserProfile|Info')
-                  - if @user.location.present?
-                    .gl-mb-1
-                      = sprite_icon('location', css_class: 'fgray')
-                      %span{ itemprop: 'addressLocality' }
-                        = @user.location
-                  - if user_local_time.present?
-                    .gl-mb-1{ data: { testid: 'user-local-time' } }
-                      = sprite_icon('clock', css_class: 'fgray')
-                      %span
-                        = user_local_time
-                  - if work_information(@user).present?
-                    .gl-mb-1
-                      = sprite_icon('work', css_class: 'fgray')
-                      %span
-                        = work_information(@user, with_schema_markup: true)
-                  = sprite_icon('calendar', css_class: 'fgray')
-                  = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
-
-              .gl-text-gray-900.gl-mt-5
-                - if @user.website_url.present? || display_public_email?(@user) || @user.skype.present? || @user.linkedin.present? || @user.twitter.present? || (Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?) || @user.discord.present?
-                  %h3.h5.gl-mb-2= s_('UserProfile|Social')
-                - if @user.website_url.present?
-                  .gl-mb-1
-                    - if Feature.enabled?(:security_auto_fix) && @user.bot?
-                      = sprite_icon('question-o', css_class: 'gl-text-blue-500')
-                    = sprite_icon('earth', css_class: 'fgray')
-                    = link_to @user.short_website_url, @user.full_website_url, class: 'gl-text-gray-900', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
-                - if display_public_email?(@user)
-                  .gl-mb-1
-                    = sprite_icon('mail', css_class: 'fgray')
-                    = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'gl-text-gray-900', itemprop: 'email'
-                - if @user.skype.present?
-                  .gl-mb-1
-                    = sprite_icon('skype', css_class: 'fgray')
-                    = link_to @user.skype, "skype:#{@user.skype}", class: 'gl-text-gray-900', title: "Skype"
-                - if @user.linkedin.present?
-                  .gl-mb-1
-                    = sprite_icon('linkedin', css_class: 'fgray')
-                    = link_to @user.linkedin, linkedin_url(@user), class: 'gl-text-gray-900', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow'
-                - if @user.twitter.present?
-                  .gl-mb-1
-                    = sprite_icon('twitter', css_class: 'fgray')
-                    = link_to @user.twitter, twitter_url(@user), class: 'gl-text-gray-900', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow'
-                - if Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?
-                  .gl-mb-1
-                    = sprite_icon('mastodon', css_class: 'fgray')
-                    = link_to @user.mastodon, mastodon_url(@user), class: 'gl-text-gray-900', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow'
-                - if @user.discord.present?
-                  .gl-mb-1
-                    = sprite_icon('discord', css_class: 'fgray')
-                    = link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
-
-              .cover-controls.gl-display-inline-flex.gl-gap-3.gl-mt-5
-                = render 'users/follow_user'
-                -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
-                - if @user == current_user
-                  = render Pajamas::ButtonComponent.new(href: profile_path,
-                    button_options: { class: 'gl-flex-grow-1', title: s_('UserProfile|Edit profile') }) do
-                    = s_("UserProfile|Edit profile")
-                = render 'users/view_gpg_keys'
-                = render 'users/view_user_in_admin_area'
-                .js-user-profile-actions{ data: user_profile_actions_data(@user) }
-
+              %h1.gl-font-size-h1.gl-line-height-1.gl-mb-1{ itemprop: 'name' }
+                = @user.name
+              %h2.gl-font-size-h2.gl-text-gray-600.gl-font-weight-normal.gl-mt-0
+                @#{@user.username}
+
+              .gl-display-flex.gl-gap-4.gl-flex-direction-column
+                - if @user.pronouns.present? || @user.pronunciation.present?
+                  .gl-font-sm
+                    - if @user.pronunciation.present?
+                      %p.gl-mb-0
+                        = s_("UserProfile|Pronounced as: %{pronunciation}") % { pronunciation: @user.pronunciation }
+                    - if @user.pronouns.present?
+                      %p.gl-mb-0
+                        = s_("UserProfile|Pronouns: %{pronouns}") % { pronouns: @user.pronouns }
+
+                - if @user.status&.customized? || @user.status&.busy?
+                  .cover-status.gl-font-sm.gl-border-l.gl-border-3.gl-px-3.gl-py-2.gl-bg-gray-10.gl-display-flex.gl-flex-direction-column.gl-gap-2
+                    - if @user.status&.busy?
+                      %div
+                        = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
+                    - if @user.status&.customized?
+                      .gl-display-inline-flex.gl-gap-3.gl-align-items-baseline
+                        = emoji_icon(@user.status.emoji)
+                        = markdown_field(@user.status, :message)
+
+                - if @user.bio.present? && @user.confirmed? && !@user.blocked?
+                  %p.profile-user-bio.gl-mb-0
+                    = @user.bio
+
+                - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
+                  - if @user.achievements.any?
+                    %div
+                      %h3.h5.gl-mb-2= s_('UserProfile|Achievements')
+                      #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
+
+                - user_local_time = local_time(@user.timezone)
+                - if @user.location.present? || user_local_time.present? || work_information(@user).present?
+                  %div{ itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' }
+                    %h3.h5.gl-mb-2= s_('UserProfile|Info')
+                    - if work_information(@user).present?
+                      .gl-mb-2
+                        = sprite_icon('work', css_class: 'fgray')
+                        %span.gl-ml-1
+                          = work_information(@user, with_schema_markup: true)
+                    - if @user.location.present?
+                      .gl-mb-2
+                        = sprite_icon('location', css_class: 'fgray')
+                        %span.gl-ml-1{ itemprop: 'addressLocality' }
+                          = @user.location
+                    - if user_local_time.present?
+                      .gl-mb-2{ data: { testid: 'user-local-time' } }
+                        = sprite_icon('clock', css_class: 'fgray')
+                        %span.gl-ml-1
+                          = user_local_time
+                    = sprite_icon('calendar', css_class: 'fgray')
+                    %span.gl-ml-1= s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
+
+                .gl-text-gray-900
+                  - if @user.website_url.present? || display_public_email?(@user) || @user.skype.present? || @user.linkedin.present? || @user.twitter.present? || (Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?) || @user.discord.present?
+                    %h3.h5.gl-mb-2= s_('UserProfile|Contact')
+                  - if @user.website_url.present?
+                    .gl-mb-2
+                      - if Feature.enabled?(:security_auto_fix) && @user.bot?
+                        = sprite_icon('question-o', css_class: 'gl-text-blue-500')
+                      = sprite_icon('earth', css_class: 'fgray')
+                      = link_to @user.short_website_url, @user.full_website_url, class: 'gl-text-gray-900 gl-ml-1', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
+                  - if display_public_email?(@user)
+                    .gl-mb-2
+                      = sprite_icon('mail', css_class: 'fgray')
+                      = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'gl-text-gray-900 gl-ml-1', itemprop: 'email'
+                  - if @user.skype.present?
+                    .gl-mb-2
+                      = sprite_icon('skype', css_class: 'fgray')
+                      = link_to @user.skype, "skype:#{@user.skype}", class: 'gl-text-gray-900 gl-ml-1', title: "Skype"
+                  - if @user.linkedin.present?
+                    .gl-mb-2
+                      = sprite_icon('linkedin', css_class: 'fgray')
+                      = link_to @user.linkedin, linkedin_url(@user), class: 'gl-text-gray-900 gl-ml-1', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow'
+                  - if @user.twitter.present?
+                    .gl-mb-2
+                      = sprite_icon('twitter', css_class: 'fgray')
+                      = link_to @user.twitter, twitter_url(@user), class: 'gl-text-gray-900 gl-ml-1', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow'
+                  - if Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?
+                    .gl-mb-2
+                      = sprite_icon('mastodon', css_class: 'fgray')
+                      = link_to @user.mastodon, mastodon_url(@user), class: 'gl-text-gray-900 gl-ml-1', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow'
+                  - if @user.discord.present?
+                    .gl-mb-2
+                      = sprite_icon('discord', css_class: 'fgray')
+                      = link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900 gl-ml-1', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
+
+
+
+      -# TODO: Remove this with the removal of the old navigation.
+      -# See https://gitlab.com/groups/gitlab-org/-/epics/11875.
       - if !profile_tabs.empty? && !Feature.enabled?(:profile_tabs_vue, current_user)
         .scrolling-tabs-container{ class: [('gl-display-none' if show_super_sidebar?)] }
           %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
@@ -197,7 +174,17 @@
                     = s_('UserProfile|Following')
                     = gl_badge_tag @user.followees.count, size: :sm
 
-    .user-profile-content
+    .user-profile-content.gl-pt-6
+      .cover-controls.gl-display-flex.gl-gap-3.gl-mb-4.gl-md-justify-content-end
+        = render 'users/follow_user'
+        -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
+        - if @user == current_user
+          = render Pajamas::ButtonComponent.new(href: profile_path,
+            button_options: { title: s_('UserProfile|Edit profile') }) do
+            = s_("UserProfile|Edit profile")
+        = render 'users/view_gpg_keys'
+        = render 'users/view_user_in_admin_area'
+        .js-user-profile-actions{ data: user_profile_actions_data(@user) }
       - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
         #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
       - unless Feature.enabled?(:profile_tabs_vue, current_user)
@@ -212,7 +199,7 @@
               - if can?(current_user, :read_cross_project)
                 %h4.gl-mt-0
                   = s_('UserProfile|Most Recent Activity')
-                .content_list{ data: { href: user_activity_path } }
+                .content_list.user-activity-content{ data: { href: user_activity_path } }
                 .loading
                   = gl_loading_icon(size: 'md')
           - unless @user.bot?
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7ea1c6d21a349e..8886e5926c1cf6 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -52230,6 +52230,9 @@ msgstr ""
 msgid "UserProfile|%{id} · created %{created} by %{author}"
 msgstr ""
 
+msgid "UserProfile|Achievements"
+msgstr ""
+
 msgid "UserProfile|Activity"
 msgstr ""
 
@@ -52254,6 +52257,9 @@ msgstr ""
 msgid "UserProfile|Busy"
 msgstr ""
 
+msgid "UserProfile|Contact"
+msgstr ""
+
 msgid "UserProfile|Contributed projects"
 msgstr ""
 
@@ -52317,9 +52323,6 @@ msgstr ""
 msgid "UserProfile|Snippets in GitLab can either be private, internal, or public."
 msgstr ""
 
-msgid "UserProfile|Social"
-msgstr ""
-
 msgid "UserProfile|Star projects to track their progress and show your appreciation."
 msgstr ""
 
@@ -52365,6 +52368,9 @@ msgstr ""
 msgid "UserProfile|Unconfirmed user"
 msgstr ""
 
+msgid "UserProfile|User Actions"
+msgstr ""
+
 msgid "UserProfile|User ID copied to clipboard"
 msgstr ""
 
diff --git a/spec/features/profiles/user_visits_profile_spec.rb b/spec/features/profiles/user_visits_profile_spec.rb
index 37a19ecadb8a7c..675c68da22fe18 100644
--- a/spec/features/profiles/user_visits_profile_spec.rb
+++ b/spec/features/profiles/user_visits_profile_spec.rb
@@ -48,7 +48,7 @@
       it 'shows expected content', :js do
         visit(user_path(user))
 
-        page.within ".cover-block" do
+        page.within ".user-info" do
           expect(page).to have_content user.name
           expect(page).to have_content user.username
         end
diff --git a/spec/features/users/rss_spec.rb b/spec/features/users/rss_spec.rb
index d71197d2f22ca9..5fcaee0211d529 100644
--- a/spec/features/users/rss_spec.rb
+++ b/spec/features/users/rss_spec.rb
@@ -13,7 +13,7 @@
     end
 
     it 'shows the RSS link with overflow menu', :js do
-      page.within('.user-profile-sidebar') do
+      page.within('.user-profile-content') do
         find_by_testid('base-dropdown-toggle').click
       end
 
@@ -27,7 +27,7 @@
     end
 
     it 'has an RSS without a feed token', :js do
-      page.within('.user-profile-sidebar') do
+      page.within('.user-profile-content') do
         find_by_testid('base-dropdown-toggle').click
       end
 
diff --git a/spec/features/users/show_spec.rb b/spec/features/users/show_spec.rb
index 3fb499990ac15a..b2b0e4ff048bc4 100644
--- a/spec/features/users/show_spec.rb
+++ b/spec/features/users/show_spec.rb
@@ -12,7 +12,7 @@
   it 'shows copy user id action in the dropdown', :js do
     subject
 
-    page.within('.user-info') do
+    page.within('.cover-controls') do
       find_by_testid('base-dropdown-toggle').click
     end
 
@@ -96,6 +96,22 @@
       end
     end
 
+    context 'join date' do
+      let_it_be(:location) { 'San Francisco, CA' }
+
+      context 'it shows a date' do
+        let_it_be(:user) { create(:user, location: location) }
+
+        it 'renders the join date' do
+          user.update!(created_at: Time.new(2020, 6, 21, 9, 22, 20, "UTC"))
+          subject
+
+          expect(page).to have_content("Member since June 21, 2020")
+          expect(page).not_to have_content("09:22")
+        end
+      end
+    end
+
     context 'location' do
       let_it_be(:location) { 'San Francisco, CA' }
 
@@ -556,12 +572,6 @@
   end
 
   context 'achievements' do
-    it 'renders the user achievements mount point' do
-      subject
-
-      expect(page).to have_selector('#js-user-achievements')
-    end
-
     context 'when the user has chosen not to display achievements' do
       let(:user) { create(:user) }
 
diff --git a/spec/views/users/_profile_basic_info.html.haml_spec.rb b/spec/views/users/_profile_basic_info.html.haml_spec.rb
deleted file mode 100644
index 142403cb2b5f0b..00000000000000
--- a/spec/views/users/_profile_basic_info.html.haml_spec.rb
+++ /dev/null
@@ -1,21 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe 'users/_profile_basic_info', feature_category: :user_profile do
-  let_it_be(:template) { 'users/profile_basic_info' }
-  let_it_be(:user) { build_stubbed(:user) }
-
-  before do
-    assign(:user, user)
-  end
-
-  it 'renders the join date' do
-    user.created_at = Time.new(2020, 6, 21, 9, 22, 20, "UTC")
-
-    render(template)
-
-    expect(rendered).to include("Member since June 21, 2020")
-    expect(rendered).not_to include("09:22")
-  end
-end
-- 
GitLab


From 879851a0b78be7ad973f33787250c7d907d2d4f7 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 8 Nov 2023 12:50:44 +0100
Subject: [PATCH 16/21] README: Add read more functionality

---
 .../javascripts/pages/users/show/index.js     |  3 ++
 app/assets/javascripts/read_more.js           |  7 +++++
 .../stylesheets/page_bundles/profile.scss     | 30 +++++++++++++++++--
 app/views/users/_overview.html.haml           | 27 +++++++++--------
 locale/gitlab.pot                             |  3 ++
 5 files changed, 56 insertions(+), 14 deletions(-)
 create mode 100644 app/assets/javascripts/pages/users/show/index.js

diff --git a/app/assets/javascripts/pages/users/show/index.js b/app/assets/javascripts/pages/users/show/index.js
new file mode 100644
index 00000000000000..dbb5e29c689ce1
--- /dev/null
+++ b/app/assets/javascripts/pages/users/show/index.js
@@ -0,0 +1,3 @@
+import initReadMore from '~/read_more';
+
+initReadMore();
diff --git a/app/assets/javascripts/read_more.js b/app/assets/javascripts/read_more.js
index 692f375bb940bc..e6289f7f32b63a 100644
--- a/app/assets/javascripts/read_more.js
+++ b/app/assets/javascripts/read_more.js
@@ -16,6 +16,8 @@
  * </div>
  * <button class="js-read-more-trigger">Read more</button>
  *
+ * If data-height is present it will use it to determine if the button should be shown or not.
+ *
  */
 export default function initReadMore(triggerSelector = '.js-read-more-trigger') {
   const triggerEls = document.querySelectorAll(triggerSelector);
@@ -29,6 +31,11 @@ export default function initReadMore(triggerSelector = '.js-read-more-trigger')
       return;
     }
 
+    if (targetEl?.getAttribute('data-height') > targetEl.clientHeight) {
+      triggerEl.remove();
+      return;
+    }
+
     triggerEl.addEventListener(
       'click',
       () => {
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index 362acaa3741b59..bf1cf6427262a6 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -70,8 +70,34 @@
   max-width: 600px;
 }
 
-.profile-readme {
-  max-height: 320px;
+.profile-readme-wrapper {
+  $height: 20rem;
+  $scrim: 3rem;
+
+  .profile-readme:not(.is-expanded) {
+    max-height: $height;
+
+    // only appears when size is > $height.
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: calc(#{$height} - #{$scrim});
+      height: $scrim;
+      background: linear-gradient(180deg, transparent, $white);
+    }
+  }
+
+  // only appears when size is > $height.
+  .js-read-more-trigger {
+    z-index: 2;
+    position: absolute;
+    left: 50%;
+    top: calc(#{$height} - #{$scrim} + 0.5rem);
+    transform: translateX(-50%);
+  }
 }
 
 .user-calendar-activities {
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 3a68162504191f..ace65dc2fd1728 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -1,16 +1,19 @@
 - if can?(current_user, :read_cross_project) && @user.user_readme&.rich_viewer
-  .profile-readme.justify-content-center.gl-border.gl-rounded-base.gl-py-5.gl-px-6.gl-mb-5.gl-overflow-y-auto
-    .gl-display-flex
-      %ol.breadcrumb.gl-breadcrumb-list.gl-mb-4
-        %li.gl-breadcrumb-item
-          = link_to project_path(@user.user_project) do
-            = @user.username
-        %li.gl-breadcrumb-item
-          = link_to @user.user_readme.path, @user.user_project.readme_url
-      - if current_user == @user
-        .gl-ml-auto
-          = link_to _('Edit'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
-    = render 'projects/blob/viewer', viewer: @user.user_readme.rich_viewer, load_async: false
+  .profile-readme-wrapper.gl-relative.gl-overflow-hidden.gl-mb-5
+    .profile-readme.read-more-container.gl-relative.justify-content-center.gl-border.gl-rounded-base.gl-py-5.gl-px-6.gl-overflow-hidden{ data: { height: 320 } }
+      .gl-display-flex
+        %ol.breadcrumb.gl-breadcrumb-list.gl-mb-4
+          %li.gl-breadcrumb-item
+            = link_to project_path(@user.user_project) do
+              = @user.username
+          %li.gl-breadcrumb-item
+            = link_to @user.user_readme.path, @user.user_project.readme_url
+        - if current_user == @user
+          .gl-ml-auto
+            = link_to _('Edit'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
+      = render 'projects/blob/viewer', viewer: @user.user_readme.rich_viewer, load_async: false
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-read-more-trigger', 'aria-label': _("Expand Readme") }) do
+      = _("Read more")
 
 - unless Feature.enabled?(:security_auto_fix) && @user.bot?
   .projects-block
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8886e5926c1cf6..9a6fcbf75bcadc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -19751,6 +19751,9 @@ msgstr ""
 msgid "Expand AI-generated summary"
 msgstr ""
 
+msgid "Expand Readme"
+msgstr ""
+
 msgid "Expand all"
 msgstr ""
 
-- 
GitLab


From fcf97d8771e165a8b42866f246f4201bd788b35d Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 8 Nov 2023 14:21:20 +0100
Subject: [PATCH 17/21] Profile header controls on mobile

---
 app/assets/stylesheets/page_bundles/profile.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index bf1cf6427262a6..c97a79d3056c47 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -123,6 +123,16 @@
     }
   }
 
+  .cover-controls {
+    position: absolute;
+    top: calc(#{$calc-application-header-height} + #{$gl-padding-24});
+    right: $gl-padding-8;
+
+    @include media-breakpoint-up(lg) {
+      position: static;
+    }
+  }
+
   .user-profile-nav {
     font-size: 0;
   }
-- 
GitLab


From 74651f883923c37732dbfd860cfe7d0c052aa6b5 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Wed, 8 Nov 2023 13:39:03 -0700
Subject: [PATCH 18/21] Tweak styling of read more button

---
 .../profile/components/user_achievements.vue    |  6 +++++-
 .../stylesheets/page_bundles/profile.scss       | 17 ++++++++---------
 app/views/users/_overview.html.haml             |  6 ++++--
 app/views/users/show.html.haml                  |  5 +----
 locale/gitlab.pot                               |  6 +++---
 spec/features/users/show_spec.rb                |  6 ++++++
 6 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/profile/components/user_achievements.vue b/app/assets/javascripts/profile/components/user_achievements.vue
index c5f1b387941f80..aea5d1641b53c8 100644
--- a/app/assets/javascripts/profile/components/user_achievements.vue
+++ b/app/assets/javascripts/profile/components/user_achievements.vue
@@ -67,12 +67,16 @@ export default {
   i18n: {
     awardedBy: s__('Achievements|Awarded %{timeAgo} by %{namespace}'),
     awardedByUnknownNamespace: s__('Achievements|Awarded %{timeAgo} by a private namespace'),
+    achievementsLabel: s__('Achievements|Achievements'),
   },
 };
 </script>
 
 <template>
-  <div>
+  <div v-if="userAchievements?.length > 0">
+    <h3 class="h5 gl-mb-2">
+      {{ $options.i18n.achievementsLabel }}
+    </h3>
     <div
       v-for="userAchievement in userAchievements"
       :key="userAchievement.id"
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index c97a79d3056c47..e7268eed9a0db2 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -71,8 +71,9 @@
 }
 
 .profile-readme-wrapper {
-  $height: 20rem;
-  $scrim: 3rem;
+  $height: 22rem;
+  $scrim: 2rem;
+  $readme-bar-height: 2.5rem;
 
   .profile-readme:not(.is-expanded) {
     max-height: $height;
@@ -84,19 +85,17 @@
       position: absolute;
       left: 0;
       right: 0;
-      top: calc(#{$height} - #{$scrim});
+      top: calc(#{$height} - #{$scrim} - #{$readme-bar-height});
       height: $scrim;
       background: linear-gradient(180deg, transparent, $white);
     }
   }
 
   // only appears when size is > $height.
-  .js-read-more-trigger {
-    z-index: 2;
-    position: absolute;
-    left: 50%;
-    top: calc(#{$height} - #{$scrim} + 0.5rem);
-    transform: translateX(-50%);
+  .read-more-bar {
+    bottom: 1px;
+    left: 1px;
+    right: 1px;
   }
 }
 
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index ace65dc2fd1728..6d55142c3f6765 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -12,8 +12,10 @@
           .gl-ml-auto
             = link_to _('Edit'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
       = render 'projects/blob/viewer', viewer: @user.user_readme.rich_viewer, load_async: false
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-read-more-trigger', 'aria-label': _("Expand Readme") }) do
-      = _("Read more")
+    .js-read-more-trigger.read-more-bar.gl-h-8.gl-absolute.gl-bottom-0.gl-z-index-2.gl-bg-white.gl-px-6.gl-rounded-bottom-base
+      = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'gl-mt-2', 'aria-label': _("Expand Readme") }) do
+        = sprite_icon('chevron-down', size: 14, css_class: 'gl-mr-1 gl-mb-n1')
+        = _("Read more")
 
 - unless Feature.enabled?(:security_auto_fix) && @user.bot?
   .projects-block
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 3af908b817f4a5..adc1b7e6585ee6 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -62,10 +62,7 @@
                     = @user.bio
 
                 - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
-                  - if @user.achievements.any?
-                    %div
-                      %h3.h5.gl-mb-2= s_('UserProfile|Achievements')
-                      #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
+                  #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
 
                 - user_local_time = local_time(@user.timezone)
                 - if @user.location.present? || user_local_time.present? || work_information(@user).present?
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9a6fcbf75bcadc..34ed8a9be7a420 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2676,6 +2676,9 @@ msgstr ""
 msgid "Achievements|%{namespace_link} awarded you the %{bold_start}%{achievement_name}%{bold_end} achievement!"
 msgstr ""
 
+msgid "Achievements|Achievements"
+msgstr ""
+
 msgid "Achievements|Awarded %{timeAgo} by %{namespace}"
 msgstr ""
 
@@ -52233,9 +52236,6 @@ msgstr ""
 msgid "UserProfile|%{id} · created %{created} by %{author}"
 msgstr ""
 
-msgid "UserProfile|Achievements"
-msgstr ""
-
 msgid "UserProfile|Activity"
 msgstr ""
 
diff --git a/spec/features/users/show_spec.rb b/spec/features/users/show_spec.rb
index b2b0e4ff048bc4..212a34df02723b 100644
--- a/spec/features/users/show_spec.rb
+++ b/spec/features/users/show_spec.rb
@@ -572,6 +572,12 @@
   end
 
   context 'achievements' do
+    it 'renders the user achievements mount point' do
+      subject
+
+      expect(page).to have_selector('#js-user-achievements')
+    end
+
     context 'when the user has chosen not to display achievements' do
       let(:user) { create(:user) }
 
-- 
GitLab


From 39c627ae47f26c80608ebeb53b2318f4476dd275 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 9 Nov 2023 09:27:58 +0100
Subject: [PATCH 19/21] Update read more, fix specs

---
 .../javascripts/profile/components/user_achievements.vue    | 2 +-
 app/assets/stylesheets/page_bundles/profile.scss            | 6 +++++-
 app/views/users/_overview.html.haml                         | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/profile/components/user_achievements.vue b/app/assets/javascripts/profile/components/user_achievements.vue
index aea5d1641b53c8..2a5e9175fa284f 100644
--- a/app/assets/javascripts/profile/components/user_achievements.vue
+++ b/app/assets/javascripts/profile/components/user_achievements.vue
@@ -73,7 +73,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="userAchievements?.length > 0">
+  <div v-if="userAchievements && userAchievements.length > 0">
     <h3 class="h5 gl-mb-2">
       {{ $options.i18n.achievementsLabel }}
     </h3>
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index e7268eed9a0db2..a3176180ecaade 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -87,7 +87,11 @@
       right: 0;
       top: calc(#{$height} - #{$scrim} - #{$readme-bar-height});
       height: $scrim;
-      background: linear-gradient(180deg, transparent, $white);
+      background: linear-gradient(180deg, transparent, rgba($black, 0.075));
+
+      .gl-dark & {
+        background: linear-gradient(180deg, transparent, rgba($black, 0.6));
+      }
     }
   }
 
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 6d55142c3f6765..842442c07d85b9 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -13,7 +13,7 @@
             = link_to _('Edit'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
       = render 'projects/blob/viewer', viewer: @user.user_readme.rich_viewer, load_async: false
     .js-read-more-trigger.read-more-bar.gl-h-8.gl-absolute.gl-bottom-0.gl-z-index-2.gl-bg-white.gl-px-6.gl-rounded-bottom-base
-      = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'gl-mt-2', 'aria-label': _("Expand Readme") }) do
+      = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'gl-mt-4 gl-ml-n1', 'aria-label': _("Expand Readme") }) do
         = sprite_icon('chevron-down', size: 14, css_class: 'gl-mr-1 gl-mb-n1')
         = _("Read more")
 
-- 
GitLab


From 1f20a24188e49387e23d1dc0d9e0b561064b7545 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Thu, 9 Nov 2023 11:28:11 -0700
Subject: [PATCH 20/21] Always show member date, hide projects if 0, gradient
 changes

---
 .../stylesheets/page_bundles/profile.scss     |  4 +-
 app/views/users/_overview.html.haml           | 17 ++++----
 app/views/users/show.html.haml                | 41 +++++++++----------
 spec/features/users/overview_spec.rb          | 14 ++-----
 4 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index a3176180ecaade..52c447f0e42a96 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -87,10 +87,10 @@
       right: 0;
       top: calc(#{$height} - #{$scrim} - #{$readme-bar-height});
       height: $scrim;
-      background: linear-gradient(180deg, transparent, rgba($black, 0.075));
+      background: linear-gradient(180deg, transparent, $white);
 
       .gl-dark & {
-        background: linear-gradient(180deg, transparent, rgba($black, 0.6));
+        background: linear-gradient(180deg, transparent, $black);
       }
     }
   }
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 842442c07d85b9..89bc4aee418134 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -1,6 +1,6 @@
 - if can?(current_user, :read_cross_project) && @user.user_readme&.rich_viewer
   .profile-readme-wrapper.gl-relative.gl-overflow-hidden.gl-mb-5
-    .profile-readme.read-more-container.gl-relative.justify-content-center.gl-border.gl-rounded-base.gl-py-5.gl-px-6.gl-overflow-hidden{ data: { height: 320 } }
+    .profile-readme.read-more-container.gl-relative.justify-content-center.gl-border.gl-rounded-base.gl-py-5.gl-px-6.gl-overflow-hidden
       .gl-display-flex
         %ol.breadcrumb.gl-breadcrumb-list.gl-mb-4
           %li.gl-breadcrumb-item
@@ -18,13 +18,14 @@
         = _("Read more")
 
 - unless Feature.enabled?(:security_auto_fix) && @user.bot?
-  .projects-block
-    .gl-display-flex.gl-align-items-baseline
-      %h4.gl-font-lg.gl-flex-grow-1
-        = s_('UserProfile|Personal projects')
-      = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
-    .overview-content-list{ data: { href: user_projects_path } }
-      = gl_loading_icon(size: 'md', css_class: 'loading')
+  - if @user.personal_projects.any?
+    .projects-block
+      .gl-display-flex.gl-align-items-baseline
+        %h4.gl-font-lg.gl-flex-grow-1
+          = s_('UserProfile|Personal projects')
+        = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
+      .overview-content-list{ data: { href: user_projects_path } }
+        = gl_loading_icon(size: 'md', css_class: 'loading')
 
 - if can?(current_user, :read_cross_project)
   .gl-align-self-start
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index adc1b7e6585ee6..762f3961851f83 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -22,7 +22,7 @@
         = link_to avatar_icon_for_user(@user, 400, current_user: current_user), class: "user-profile-image", target: '_blank', rel: 'noopener noreferrer', alt: 'View large avatar' do
           = render Pajamas::AvatarComponent.new(@user, alt: "", size: 96, avatar_options: { itemprop: "image" })
 
-        .gl-display-inline-block.gl-vertical-align-top.gl-text-left.gl-max-w-80.gl-overflow-wrap-anywhere
+        .gl-vertical-align-top.gl-text-left.gl-max-w-80.gl-overflow-wrap-anywhere
           - if @user.blocked? || !@user.confirmed?
             .user-info
               %h1.gl-font-size-h1.gl-line-height-1.gl-mb-1
@@ -65,26 +65,25 @@
                   #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
 
                 - user_local_time = local_time(@user.timezone)
-                - if @user.location.present? || user_local_time.present? || work_information(@user).present?
-                  %div{ itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' }
-                    %h3.h5.gl-mb-2= s_('UserProfile|Info')
-                    - if work_information(@user).present?
-                      .gl-mb-2
-                        = sprite_icon('work', css_class: 'fgray')
-                        %span.gl-ml-1
-                          = work_information(@user, with_schema_markup: true)
-                    - if @user.location.present?
-                      .gl-mb-2
-                        = sprite_icon('location', css_class: 'fgray')
-                        %span.gl-ml-1{ itemprop: 'addressLocality' }
-                          = @user.location
-                    - if user_local_time.present?
-                      .gl-mb-2{ data: { testid: 'user-local-time' } }
-                        = sprite_icon('clock', css_class: 'fgray')
-                        %span.gl-ml-1
-                          = user_local_time
-                    = sprite_icon('calendar', css_class: 'fgray')
-                    %span.gl-ml-1= s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
+                %div{ itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' }
+                  %h3.h5.gl-mb-2= s_('UserProfile|Info')
+                  - if work_information(@user).present?
+                    .gl-mb-2
+                      = sprite_icon('work', css_class: 'fgray')
+                      %span.gl-ml-1
+                        = work_information(@user, with_schema_markup: true)
+                  - if @user.location.present?
+                    .gl-mb-2
+                      = sprite_icon('location', css_class: 'fgray')
+                      %span.gl-ml-1{ itemprop: 'addressLocality' }
+                        = @user.location
+                  - if user_local_time.present?
+                    .gl-mb-2{ data: { testid: 'user-local-time' } }
+                      = sprite_icon('clock', css_class: 'fgray')
+                      %span.gl-ml-1
+                        = user_local_time
+                  = sprite_icon('calendar', css_class: 'fgray')
+                  %span.gl-ml-1= s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
 
                 .gl-text-gray-900
                   - if @user.website_url.present? || display_public_email?(@user) || @user.skype.present? || @user.linkedin.present? || @user.twitter.present? || (Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?) || @user.discord.present?
diff --git a/spec/features/users/overview_spec.rb b/spec/features/users/overview_spec.rb
index 1d7402176311c9..0cb5e4c407c821 100644
--- a/spec/features/users/overview_spec.rb
+++ b/spec/features/users/overview_spec.rb
@@ -89,17 +89,11 @@ def push_code_contribution
     describe 'user has no personal projects' do
       include_context 'visit overview tab'
 
-      it 'shows an empty project list with an info message' do
-        page.within('.projects-block') do
-          expect(page).to have_selector('.loading', visible: false)
-          expect(page).to have_content('You haven\'t created any personal projects.')
-          expect(page).not_to have_selector('.project-row')
+      it 'does not show the projects block' do
+        page.within('.user-profile-content') do
+          expect(page).not_to have_selector('.projects-block')
         end
       end
-
-      it 'does not show a link to the project list' do
-        expect(find('#js-overview .projects-block')).to have_selector('.js-view-all', visible: false)
-      end
     end
 
     describe 'user has a personal project' do
@@ -315,7 +309,7 @@ def push_code_contribution
       end
 
       it 'shows projects panel' do
-        expect(page).to have_selector('.projects-block')
+        expect(page).not_to have_selector('.projects-block')
       end
     end
   end
-- 
GitLab


From 94319d6b6f56cbd1bdd7d48481243289ef0690d2 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Thu, 9 Nov 2023 14:21:16 -0700
Subject: [PATCH 21/21] Move activity to top of page

---
 .../javascripts/pages/users/user_tabs.js      |  2 +-
 app/views/users/_overview.html.haml           | 41 ++++++++++---------
 locale/gitlab.pot                             |  3 ++
 spec/features/users/overview_spec.rb          |  8 ++--
 4 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 704b4ca6f32ce6..b5acc39e8df25f 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -212,7 +212,7 @@ export default class UserTabs {
     this.loadActivityCalendar();
 
     UserTabs.renderMostRecentBlocks('#js-overview .activities-block', {
-      requestParams: { limit: 15 },
+      requestParams: { limit: 10 },
     });
 
     UserTabs.renderMostRecentBlocks('#js-overview .projects-block', {
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 89bc4aee418134..67fb6514478abb 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -1,5 +1,24 @@
+- if can?(current_user, :read_cross_project)
+  .gl-align-self-start
+    .activities-block
+      .user-calendar.gl-border.light.gl-rounded-base.gl-px-3.gl-pt-4.gl-mb-5{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: local_timezone_instance(@user.timezone).now.utc_offset } }
+        = gl_loading_icon(size: 'md', css_class: 'gl-my-8')
+        .user-calendar-error.invisible
+          = _('There was an error loading users activity calendar.')
+          %a.js-retry-load{ href: '#' }
+            = s_('UserProfile|Retry')
+
+      .gl-display-flex.gl-align-items-baseline
+        %h4.gl-font-lg.gl-flex-grow-1
+          = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
+        = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
+
+      .user-calendar-activities
+      .overview-content-list.user-activity-content.gl-mb-5{ data: { href: user_activity_path, testid: 'user-activity-content' } }
+        = gl_loading_icon(size: 'md', css_class: 'loading')
+
 - if can?(current_user, :read_cross_project) && @user.user_readme&.rich_viewer
-  .profile-readme-wrapper.gl-relative.gl-overflow-hidden.gl-mb-5
+  .profile-readme-wrapper.gl-relative.gl-overflow-hidden.gl-mb-5{ data: { height: 320 } }
     .profile-readme.read-more-container.gl-relative.justify-content-center.gl-border.gl-rounded-base.gl-py-5.gl-px-6.gl-overflow-hidden
       .gl-display-flex
         %ol.breadcrumb.gl-breadcrumb-list.gl-mb-4
@@ -10,7 +29,7 @@
             = link_to @user.user_readme.path, @user.user_project.readme_url
         - if current_user == @user
           .gl-ml-auto
-            = link_to _('Edit'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
+            = link_to _('Edit file'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
       = render 'projects/blob/viewer', viewer: @user.user_readme.rich_viewer, load_async: false
     .js-read-more-trigger.read-more-bar.gl-h-8.gl-absolute.gl-bottom-0.gl-z-index-2.gl-bg-white.gl-px-6.gl-rounded-bottom-base
       = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'gl-mt-4 gl-ml-n1', 'aria-label': _("Expand Readme") }) do
@@ -26,21 +45,3 @@
         = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
       .overview-content-list{ data: { href: user_projects_path } }
         = gl_loading_icon(size: 'md', css_class: 'loading')
-
-- if can?(current_user, :read_cross_project)
-  .gl-align-self-start
-    .activities-block.gl-mt-5
-      .gl-display-flex.gl-align-items-baseline
-        %h4.gl-font-lg.gl-flex-grow-1
-          = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
-        = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
-      .user-calendar.gl-border.light.gl-rounded-base.gl-px-3.gl-pt-4{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: local_timezone_instance(@user.timezone).now.utc_offset } }
-        = gl_loading_icon(size: 'md', css_class: 'gl-my-8')
-        .user-calendar-error.invisible
-          = _('There was an error loading users activity calendar.')
-          %a.js-retry-load{ href: '#' }
-            = s_('UserProfile|Retry')
-
-      .user-calendar-activities
-      .overview-content-list.user-activity-content{ data: { href: user_activity_path, testid: 'user-activity-content' } }
-        = gl_loading_icon(size: 'md', css_class: 'loading')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 34ed8a9be7a420..c231f98af77e90 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -18016,6 +18016,9 @@ msgstr ""
 msgid "Edit environment"
 msgstr ""
 
+msgid "Edit file"
+msgstr ""
+
 msgid "Edit files in the editor and commit changes here"
 msgstr ""
 
diff --git a/spec/features/users/overview_spec.rb b/spec/features/users/overview_spec.rb
index 0cb5e4c407c821..48d0cf1d9d35a9 100644
--- a/spec/features/users/overview_spec.rb
+++ b/spec/features/users/overview_spec.rb
@@ -60,15 +60,15 @@ def push_code_contribution
       end
     end
 
-    describe 'user has 15 activities' do
+    describe 'user has 10 activities' do
       before do
-        16.times { push_code_contribution }
+        11.times { push_code_contribution }
       end
 
       include_context 'visit overview tab'
 
-      it 'displays 15 entries in the list of activities' do
-        expect(find('#js-overview')).to have_selector('.event-item', count: 15)
+      it 'displays 10 entries in the list of activities' do
+        expect(find('#js-overview')).to have_selector('.event-item', count: 10)
       end
 
       it 'shows a link to the activity list' do
-- 
GitLab