cleans up issuable list, making them more responsiveissueable-list-cleanup

1 files changed, 31 insertions, 19 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index a776f3d19c7..0e727db141d 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -585,7 +585,22 @@
     .issue-info-container {
       -webkit-flex: 1;
       flex: 1;
+      display: flex;
       padding-right: $gl-padding;
+
+      .issue-main-info {
+        flex: 1 auto;
+      }
+
+      .issuable-meta {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        .controls {
+          margin-bottom: 2px;
+        }
+      }
     }
 
     .issue-check {
@@ -598,25 +613,27 @@
       }
     }
 
-    .issue-title,
-    .issue-info {
-      margin-right: 150px;
-    }
-
-    .issue-milestone a,
+    .issue-milestone,
     .issue-info,
-    .task-status {
+    .task-status,
+    .issue-updated-at {
       font-weight: normal;
-      font-size: 13px;
       color: $gl-text-color-secondary;
+
+      a {
+        color: $gl-text-color;
+
+        .fa {
+          color: $gl-text-color-secondary;
+        }
+      }
     }
 
-    .issuable-meta {
-      font-size: 13px;
-      position: absolute;
-      right: 15px;
-      top: 15px;
-      width: 150px;
+    @media(max-width: $screen-md-max) {
+      .task-status,
+      .issue-due-date {
+        display: none;
+      }
     }
 
     @media(max-width: $screen-xs-max) {
@@ -627,11 +644,6 @@
       .issue-updated-at {
         display: none;
       }
-
-      .issue-title,
-      .issue-info {
-        margin-right: 100px;
-      }
     }
   }
 }