Replace long var name with a comment, hide "Milestone" in "Reopen Milestone" on a small screen

1 files changed, 5 insertions, 5 deletions

diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 77b80073cc4..c784db0e225 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -57,14 +57,14 @@
     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;
+    // on small screens split into two line
     flex-wrap: wrap;
 
-    @media (min-width: $width_to_show_stats_and_buttons_on_one_line) {
+    @media (min-width: $screen-xs-min) {
+      // on bigger screens show on one line
       justify-content: space-between;
       flex-wrap: nowrap;
     }
@@ -75,7 +75,7 @@
     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) {
+    @media (min-width: $screen-xs-min) {
       // when displayed on one line stats go first, buttons second
       order: 2;
       margin-top: 0;
@@ -93,7 +93,7 @@
     width: 100%;
     padding: 7px 0;
     flex-shrink: 1;
-    @media (min-width: $width_to_show_stats_and_buttons_on_one_line) {
+    @media (min-width: $screen-xs-min) {
       // when displayed on one line stats go first, buttons second
       order: 1;
     }