Epic tabs UI fixes

- Fix alignment of activity dropdown in epic discussion tab
- Add counter to epic discussion tab

ee/app/views/groups/epics/show.html.haml

@@ -18,21 +18,19 @@
 
 .epic-tabs-holder
   .epic-tabs-container.js-epic-tabs-container
-    .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-      .fade-left= icon('angle-left')
-      .fade-right= icon('angle-right')
-      %ul.epic-tabs.nav-tabs.nav.nav-links.scrolling-tabs
-        %li.notes-tab.qa-notes-tab
-          %a#discussion-tab.active{ href: '#discussion', data: { toggle: 'tab' } }
-            = _('Discussion')
-        - if Feature.enabled?(:epic_trees)
-          %li.tree-tab
-            %a#tree-tab{ href: '#tree', data: { toggle: 'tab' } }
-              = _('Tree')
-        %li.roadmap-tab
-          %a#roadmap-tab{ href: '#roadmap', data: { toggle: 'tab' } }
-            = _('Roadmap')
-    .d-inline-flex.flex-wrap
+    %ul.epic-tabs.nav-tabs.nav.nav-links.scrolling-tabs
+      %li.notes-tab.qa-notes-tab
+        %a#discussion-tab.active{ href: '#discussion', data: { toggle: 'tab' } }
+          = _('Discussion')
+          %span.badge.badge-pill= @epic.notes.user.count
+      - if Feature.enabled?(:epic_trees)
+        %li.tree-tab
+          %a#tree-tab{ href: '#tree', data: { toggle: 'tab' } }
+            = _('Tree')
+      %li.roadmap-tab
+        %a#roadmap-tab{ href: '#roadmap', data: { toggle: 'tab' } }
+          = _('Roadmap')
+    .d-flex.flex-wrap.align-items-center.justify-content-lg-end
       #js-vue-discussion-filter{ data: { default_filter: current_user&.notes_filter_for(@epic),
         notes_filters: UserPreference.notes_filters.to_json } }
 

ee/changelogs/unreleased/12193-epic-tabs-fixes.yml

+---
+title: Fix alignment of activity dropdown in epic tabs; add counter to discussion
+  tab
+merge_request:
+author:
+type: other