1 files changed, 101 insertions, 3 deletions

diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 13402acd8e1..8843d1463db 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -11,6 +11,7 @@
     }
 
     .progress {
+      width: 100%;
       height: 6px;
     }
   }
@@ -30,7 +31,6 @@
       margin-right: 7px;
     }
 
-    // Issue title
     span a {
       color: $gl-text-color;
       word-wrap: break-word;
@@ -39,15 +39,66 @@
 }
 
 .milestone-summary {
-  margin-bottom: 25px;
-
   .milestone-stat {
+    white-space: nowrap;
     margin-right: 10px;
+
+    &.with-drilldown {
+      margin-right: 2px;
+    }
   }
 
   .remaining-days {
     color: $orange-light;
   }
+
+  .milestone-stats-and-buttons {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    @media (min-width: $screen-xs-min) {
+      justify-content: space-between;
+      flex-wrap: nowrap;
+    }
+  }
+
+  .milestone-progress-buttons {
+    order: 1;
+    margin-top: 10px;
+
+    @media (min-width: $screen-xs-min) {
+      order: 2;
+      margin-top: 0;
+      flex-shrink: 0;
+    }
+
+    .btn {
+      float: left;
+      margin-right: $btn-side-margin;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .milestone-stats {
+    order: 2;
+    width: 100%;
+    padding: 7px 0;
+    flex-shrink: 1;
+
+    @media (min-width: $screen-xs-min) {
+      // when displayed on one line stats go first, buttons second
+      order: 1;
+    }
+  }
+
+  .progress {
+    width: 100%;
+    margin: 15px 0;
+  }
 }
 
 .issues-sortable-list,
@@ -82,3 +133,50 @@
     }
   }
 }
+
+.milestone-page-header {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .status-box {
+    margin-top: 0;
+  }
+
+  .milestone-buttons {
+    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;
+    }
+  }
+}