Make the milestone page more responsive

app/assets/stylesheets/pages/milestone.scss

@@ -11,6 +11,7 @@
     }
 
     .progress {
+      width: 100%;
       height: 6px;
     }
   }
@@ -39,15 +40,69 @@
 }
 
 .milestone-summary {
-  margin-bottom: 25px;
+
+  h4 {
+    margin-bottom: 0;
+  }
 
   .milestone-stat {
+    white-space: nowrap;
     margin-right: 10px;
+    &.with-drilldown {
+      margin-right: 2px; // the drill down element should sit closer to its parent
+    }
   }
 
   .remaining-days {
     color: $orange-light;
   }
+
+  $width_to_show_stats_and_buttons_on_one_line: $screen-xs-min;
+
+  .milestone-stats-and-buttons {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    @media (min-width: $width_to_show_stats_and_buttons_on_one_line) {
+      justify-content: space-between;
+      flex-wrap: nowrap;
+    }
+  }
+
+  .milestone-progress-buttons {
+    // for small devices buttons go first
+    order: 1;
+    // buttons go on its own line below the header and need some margin
+    margin-top: 10px;
+    @media (min-width: $width_to_show_stats_and_buttons_on_one_line) {
+      // when displayed on one line stats go first, buttons second
+      order: 2;
+      margin-top: 0;
+      flex-shrink: 0;
+    }
+
+    .btn {
+      float: left;
+      margin-right: $btn-side-margin;
+    }
+  }
+
+  .milestone-stats {
+    order: 2;
+    width: 100%;
+    padding: 7px 0;
+    flex-shrink: 1;
+    @media (min-width: $width_to_show_stats_and_buttons_on_one_line) {
+      // when displayed on one line stats go first, buttons second
+      order: 1;
+    }
+  }
+
+  .progress {
+    width: 100%;
+    margin: 15px 0;
+  }
 }
 
 .issues-sortable-list,
@@ -82,3 +137,48 @@
     }
   }
 }
+
+.milestone-page-header {
+  display: flex;
+  flex-flow: row;
+  align-content: center;
+  flex-wrap: wrap;
+  .status-box {
+    margin-top: 0; // reset what's inherited from the framework css. elements here are v-aligned by flexbox
+  }
+  .milestone-buttons {
+    // flex flow is row (left to right)
+    // but buttons should stick to the right side
+    margin-left: auto;
+  }
+
+  .status-box {
+    order: 1;
+  }
+  .milestone-buttons {
+    order: 2;
+  }
+  .header-text-content {
+    order: 3;
+    width: 100%;
+  }
+
+  .milestone-buttons .verbose {
+    display: none;
+  }
+
+  @media (min-width: $screen-xs-min) {
+
+    .milestone-buttons .verbose {
+      display: inline;
+    }
+
+    .header-text-content {
+      order: 2;
+      width: auto;
+    }
+    .milestone-buttons {
+      order: 3;
+    }
+  }
+}

app/views/projects/milestones/show.html.haml

@@ -4,7 +4,7 @@
 = render "projects/issues/head"
 
 %div{ class: container_class }
-  .detail-page-header
+  .detail-page-header.milestone-page-header
     .status-box{ class: status_box_class(@milestone) }
       - if @milestone.closed?
         Closed
@@ -12,13 +12,14 @@
         Past due
       - else
         Open
+    .header-text-content
       %span.identifier
         Milestone ##{@milestone.iid}
       - if @milestone.expires_at
         %span.creator
           ·
           = @milestone.expires_at
-    .pull-right
+    .milestone-buttons
       - if can?(current_user, :admin_milestone, @project)
         - if @milestone.active?
           = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, @milestone, milestone: {state_event: :close }), method: :put, class: "btn btn-close btn-nr btn-grouped"

app/views/shared/milestones/_summary.html.haml

@@ -3,6 +3,10 @@
 .context.prepend-top-default
   .milestone-summary
     %h4 Progress
+
+    .milestone-stats-and-buttons
+      .milestone-stats
+        %span.milestone-stat.with-drilldown
           %strong= milestone.issues_visible_to_user(current_user).size
           issues:
         %span.milestone-stat
@@ -10,6 +14,7 @@
           open and
           %strong= milestone.issues_visible_to_user(current_user).closed.size
           closed
+        %span.milestone-stat.with-drilldown
           %strong= milestone.merge_requests.size
           merge requests:
         %span.milestone-stat
@@ -20,15 +25,16 @@
         %span.milestone-stat
           %strong== #{milestone.percent_complete(current_user)}%
           complete
-
         %span.milestone-stat
           %span.remaining-days= milestone_remaining_days(milestone)
-    %span.pull-right.tab-issues-buttons
+
+      .milestone-progress-buttons
+        %span.tab-issues-buttons
           - if project && can?(current_user, :create_issue, project)
-        = link_to new_namespace_project_issue_path(project.namespace, project, issue: { milestone_id: milestone.id }), class: "btn  btn-grouped", title: "New Issue" do
+            = link_to new_namespace_project_issue_path(project.namespace, project, issue: { milestone_id: milestone.id }), class: "btn", title: "New Issue" do
               New Issue
-      = link_to 'Browse Issues', milestones_browse_issuables_path(milestone, type: :issues), class: "btn btn-grouped"
-    %span.pull-right.tab-merge-requests-buttons.hidden
-      = link_to 'Browse Merge Requests', milestones_browse_issuables_path(milestone, type: :merge_requests), class: "btn btn-grouped"
+          = link_to 'Browse Issues', milestones_browse_issuables_path(milestone, type: :issues), class: "btn"
+        %span.tab-merge-requests-buttons.hidden
+          = link_to 'Browse Merge Requests', milestones_browse_issuables_path(milestone, type: :merge_requests), class: "btn"
 
     = milestone_progress_bar(milestone)