Merge branch 'ph/357132/fixReviewerUsernameOverflow' into 'master'

Fix reviewer & assignee usernames overflowing

See merge request gitlab-org/gitlab!83954

app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue

@@ -109,20 +109,23 @@ export default {
         :key="user.id"
         :class="{
           'user-item': !showVerticalList,
+          'gl-display-inline-block': !showVerticalList,
+          'gl-display-flex': showVerticalList,
           'gl-mb-3': index !== users.length - 1 && showVerticalList,
         }"
-        class="gl-display-inline-block"
       >
         <attention-requested-toggle
           v-if="showVerticalList"
           :user="user"
           type="assignee"
+          class="gl-mr-2"
           @toggle-attention-requested="toggleAttentionRequested"
         />
         <assignee-avatar-link
           :user="user"
           :issuable-type="issuableType"
           :tooltip-has-name="!showVerticalList"
+          class="gl-word-break-word"
         >
           <div
             v-if="showVerticalList"

app/assets/javascripts/sidebar/components/attention_requested_toggle.vue

@@ -70,19 +70,21 @@ export default {
 </script>
 
 <template>
-  <span
-    v-gl-tooltip.left.viewport="tooltipTitle"
-    class="gl-display-inline-block js-attention-request-toggle"
-  >
-    <gl-button
-      :loading="loading"
-      :variant="user.attention_requested ? 'warning' : 'default'"
-      :icon="user.attention_requested ? 'attention-solid' : 'attention'"
-      :aria-label="tooltipTitle"
-      :class="{ 'gl-pointer-events-none': !user.can_update_merge_request }"
-      size="small"
-      category="tertiary"
-      @click="toggleAttentionRequired"
-    />
-  </span>
+  <div>
+    <span
+      v-gl-tooltip.left.viewport="tooltipTitle"
+      class="gl-display-inline-block js-attention-request-toggle"
+    >
+      <gl-button
+        :loading="loading"
+        :variant="user.attention_requested ? 'warning' : 'default'"
+        :icon="user.attention_requested ? 'attention-solid' : 'attention'"
+        :aria-label="tooltipTitle"
+        :class="{ 'gl-pointer-events-none': !user.can_update_merge_request }"
+        size="small"
+        category="tertiary"
+        @click="toggleAttentionRequired"
+      />
+    </span>
+  </div>
 </template>

app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue

@@ -73,10 +73,10 @@ export default {
     v-gl-tooltip="tooltipOption"
     :href="reviewerUrl"
     :title="tooltipTitle"
-    class="d-inline-block"
+    class="gl-display-inline-block"
   >
     <!-- use d-flex so that slot can be appropriately styled -->
-    <span class="gl-display-flex gl-align-items-center">
+    <span class="gl-display-flex">
       <reviewer-avatar :user="user" :img-size="32" :issuable-type="issuableType" />
       <slot :user="user"></slot>
     </span>

app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue

@@ -96,14 +96,21 @@ export default {
       :key="user.id"
       :class="{ 'gl-mb-3': index !== users.length - 1 }"
       data-testid="reviewer"
+      class="gl-display-flex"
     >
       <attention-requested-toggle
         v-if="glFeatures.mrAttentionRequests"
         :user="user"
         type="reviewer"
+        class="gl-mr-2"
         @toggle-attention-requested="toggleAttentionRequested"
       />
-      <reviewer-avatar-link :user="user" :root-path="rootPath" :issuable-type="issuableType">
+      <reviewer-avatar-link
+        :user="user"
+        :root-path="rootPath"
+        :issuable-type="issuableType"
+        class="gl-word-break-word gl-mr-2"
+      >
         <div class="gl-ml-3 gl-line-height-normal gl-display-grid">
           <span>{{ user.name }}</span>
           <span>@{{ user.username }}</span>
@@ -115,7 +122,7 @@ export default {
         :size="16"
         :title="approvedByTooltipTitle(user)"
         name="status-success"
-        class="float-right gl-my-2 gl-ml-2 gl-text-green-500"
+        class="float-right gl-my-2 gl-ml-auto gl-text-green-500 gl-flex-shrink-0"
         data-testid="re-approved"
       />
       <gl-icon