Fix Alignment of Resolved Threads Counterresolved-thread-alignment

Fixes the button group alignments of the threads-resolved counter and
buttons

4 files changed, 18 insertions, 15 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index d7ffa0abb79..b39fd735894 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -23,6 +23,9 @@ export default {
     isLoggedIn() {
       return this.getUserData.id;
     },
+    hasAnyButtons() {
+      return this.hasNextButton || (this.resolveAllDiscussionsIssuePath && !this.allResolved);
+    },
     hasNextButton() {
       return this.isLoggedIn && !this.allResolved;
     },
@@ -50,7 +53,7 @@ export default {
 
 <template>
   <div v-if="resolvableDiscussionsCount > 0" class="line-resolve-all-container full-width-mobile">
-    <div class="full-width-mobile d-flex d-sm-block">
+    <div class="full-width-mobile d-flex">
       <div :class="{ 'has-next-btn': hasNextButton }" class="line-resolve-all">
         <span
           :class="{ 'is-active': allResolved }"
@@ -64,24 +67,20 @@ export default {
           {{ n__('thread resolved', 'threads resolved', resolvableDiscussionsCount) }}
         </span>
       </div>
-      <div
-        v-if="resolveAllDiscussionsIssuePath && !allResolved"
-        class="btn-group btn-group-sm"
-        role="group"
-      >
+      <div v-if="hasAnyButtons" class="btn-group btn-group-sm" role="group">
         <a
+          v-if="resolveAllDiscussionsIssuePath && !allResolved"
           v-gl-tooltip
           :href="resolveAllDiscussionsIssuePath"
-          :title="s__('Resolve all threads in new issue')"
+          :title="__('Resolve all threads in new issue')"
           class="new-issue-for-discussion btn btn-default discussion-create-issue-btn"
         >
           <icon name="issue-new" />
         </a>
-      </div>
-      <div v-if="isLoggedIn && !allResolved" class="btn-group btn-group-sm" role="group">
         <button
+          v-if="hasNextButton"
           v-gl-tooltip
-          title="Jump to first unresolved thread"
+          :title="__('Jump to first unresolved thread')"
           class="btn btn-default discussion-next-btn"
           @click="jumpToFirstUnresolvedDiscussion"
         >
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index b9b8eabf909..2ec584e32b3 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -825,17 +825,13 @@ $note-form-margin-left: 72px;
     white-space: nowrap;
   }
 
-  .btn-group {
-    margin-left: -4px;
-  }
-
   .discussion-next-btn {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
   .btn {
-    line-height: $gl-line-height;
+    line-height: 1.5;
 
     svg {
       fill: $gray-darkest;
diff --git a/changelogs/unreleased/resolved-thread-alignment.yml b/changelogs/unreleased/resolved-thread-alignment.yml
new file mode 100644
index 00000000000..9384173c530
--- /dev/null
+++ b/changelogs/unreleased/resolved-thread-alignment.yml
@@ -0,0 +1,5 @@
+---
+title: Fix Alignment of Resolved Threads Counter
+merge_request: 30742
+author:
+type: fixed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a4fee96753d..d240e952a94 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -5888,6 +5888,9 @@ msgstr ""
 msgid "Jump to first unresolved discussion"
 msgstr ""
 
+msgid "Jump to first unresolved thread"
+msgstr ""
+
 msgid "Jump to next unresolved discussion"
 msgstr ""