Merge branch '25810-misaligned-count' into 'master'

Align milestone column header with count number

## What does this MR do?
- Aligns the milestone column header with the count number
- Prevents the count from wrapping below the column header

## Why was this MR needed?
- Count number was being pushed below the column header text if the text was too long

## Screenshots (if relevant)
- see issue sceenshots for before #25810 
- fixed version
![milestones](/uploads/ca12c290abe814b457ad3b2fb86f7696/milestones.png)


## Does this MR meet the acceptance criteria?

- [ ] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?


Closes #25810

See merge request !8177

2 files changed, 19 insertions, 3 deletions

diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss
index 5ba0486177f..9d8d08dff88 100644
--- a/app/assets/stylesheets/framework/panels.scss
+++ b/app/assets/stylesheets/framework/panels.scss
@@ -18,6 +18,20 @@
       margin-top: -2px;
       margin-left: 5px;
     }
+
+    &.split {
+      display: flex;
+      align-items: center;
+    }
+
+    .left {
+      flex: 1 1 auto;
+    }
+
+    .right {
+      flex: 0 0 auto;
+      text-align: right;
+    }
   }
 
   .panel-body {
diff --git a/app/views/shared/milestones/_issuables.html.haml b/app/views/shared/milestones/_issuables.html.haml
index 8619939dde7..15ff5b8a27e 100644
--- a/app/views/shared/milestones/_issuables.html.haml
+++ b/app/views/shared/milestones/_issuables.html.haml
@@ -3,10 +3,12 @@
 - panel_class = primary ? 'panel-primary' : 'panel-default'
 
 .panel{ class: panel_class }
-  .panel-heading
-    = title
+  .panel-heading.split
+    .left
+      = title
     - if show_counter
-      .pull-right= issuables.size
+      .right
+        = issuables.size
 
   - class_prefix = dom_class(issuables).pluralize
   %ul{ class: "well-list #{class_prefix}-sortable-list", id: "#{class_prefix}-list-#{id}", "data-state" => id }