Correct media queries for small devices and tablets.

app/assets/stylesheets/framework/issue_box.scss

@@ -5,14 +5,17 @@
  */
 
 .status-box {
-  @media (max-width: $screen-sm-max) {
-        padding: 5px 11px;
-    margin-top: 4px;
-  }
+  
+  /* Extra small devices (phones, less than 768px) */
+  /* No media query since this is the default in Bootstrap */
+  padding: 5px 11px;
+  margin-top: 4px;
+  /* Small devices (tablets, 768px and up) */
   @media (min-width: $screen-sm-min) {
     padding: 0 $gl-btn-padding;
     margin-top: 5px;
   }
+
   @include border-radius(3px);
   display: block;
   float: left;

app/assets/stylesheets/framework/sidebar.scss

@@ -27,9 +27,10 @@
   }
 
   &.right-sidebar-expanded {
-    @media (max-width: $screen-sm-max) {
-      padding-right: 0;
-    }
+    /* Extra small devices (phones, less than 768px) */
+    /* No media query since this is the default in Bootstrap */
+    padding-right: 0;
+    /* Small devices (tablets, 768px and up) */
     @media (min-width: $screen-sm-min) {
       padding-right: $gutter_width;
     }

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

@@ -11,12 +11,12 @@
         %span.hidden-xs
           Closed
         %span.hidden-sm.hidden-md.hidden-lg
-          =icon('check')
+          = icon('check')
       .status-box{ class: "status-box-open #{issue_button_visibility(@issue, true)}"}
         %span.hidden-xs
           Open
         %span.hidden-sm.hidden-md.hidden-lg
-          =icon('circle-o')
+          = icon('circle-o')
 
     %a.btn.btn-default.pull-right.hidden-sm.hidden-md.hidden-lg.gutter-toggle{ href: "#" }
       =icon('angle-double-left')