Add latest changes from gitlab-org/gitlab@master

6 files changed, 34 insertions, 22 deletions

diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 558fe8ca2aa..131d1d2df1f 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/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"
diff --git a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue
index 6ba88939373..cdc1c65a516 100644
--- a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue
+++ b/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>
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
index 42d2e456a07..2ab46a7a655 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
@@ -3,7 +3,7 @@ import { GlButton } from '@gitlab/ui';
 import $ from 'jquery';
 import { mapActions } from 'vuex';
 import createFlash from '~/flash';
-import { __, sprintf } from '../../../locale';
+import { __, sprintf } from '~/locale';
 import eventHub from '../../event_hub';
 
 export default {
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
index 361a082def6..a11468c8761 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
+++ b/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>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
index 9485802d3da..430017246c1 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
+++ b/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
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
index bb90ef8e444..91c15061fb9 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
 import { joinPaths } from '~/lib/utils/url_utility';
-import { sprintf, s__ } from '../../../locale';
+import { sprintf, s__ } from '~/locale';
 
 export default {
   name: 'TimeTrackingHelpState',