Fix Alignment of Resolved Threads Counterbutton-bug-fixes

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

2 files changed, 23 insertions, 29 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index d7ffa0abb79..4f177606cb4 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -50,7 +50,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,29 +64,27 @@ export default {
           {{ n__('thread resolved', 'threads resolved', resolvableDiscussionsCount) }}
         </span>
       </div>
-      <div
-        v-if="resolveAllDiscussionsIssuePath && !allResolved"
-        class="btn-group btn-group-sm"
-        role="group"
-      >
-        <a
-          v-gl-tooltip
-          :href="resolveAllDiscussionsIssuePath"
-          :title="s__('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-gl-tooltip
-          title="Jump to first unresolved thread"
-          class="btn btn-default discussion-next-btn"
-          @click="jumpToFirstUnresolvedDiscussion"
-        >
-          <icon name="comment-next" />
-        </button>
+      <div class="btn-group btn-group-sm" role="group">
+        <template v-if="resolveAllDiscussionsIssuePath && !allResolved">
+          <a
+            v-gl-tooltip
+            :href="resolveAllDiscussionsIssuePath"
+            :title="s__('Resolve all threads in new issue')"
+            class="new-issue-for-discussion btn btn-default discussion-create-issue-btn"
+          >
+            <icon name="issue-new" />
+          </a>
+        </template>
+        <template v-if="isLoggedIn && !allResolved">
+          <button
+            v-gl-tooltip
+            title="Jump to first unresolved thread"
+            class="btn btn-default discussion-next-btn"
+            @click="jumpToFirstUnresolvedDiscussion"
+          >
+            <icon name="comment-next" />
+          </button>
+        </template>
       </div>
     </div>
   </div>
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;