Conform related issues/MRs card to design docs

1 files changed, 49 insertions, 32 deletions

diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index 7f9cf1266b1..59224d37744 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -83,6 +83,20 @@ $item-weight-max-width: 48px;
     flex-basis: 100%;
   }
 
+  .item-attributes-area {
+    > * {
+      margin-left: 8px;
+    }
+
+    .board-card-info {
+      margin-right: 0;
+    }
+
+    @include media-breakpoint-down(sm) {
+      margin-left: -8px;
+    }
+  }
+
   .item-milestone,
   .item-weight {
     cursor: help;
@@ -101,39 +115,39 @@ $item-weight-max-width: 48px;
   .item-weight {
     max-width: $item-weight-max-width;
   }
+}
 
-  .item-assignees {
-    .user-avatar-link {
-      margin-right: -$gl-padding-4;
-
-      &:nth-of-type(1) {
-        z-index: 2;
-      }
+.item-assignees {
+  .user-avatar-link {
+    margin-right: -$gl-padding-4;
 
-      &:nth-of-type(2) {
-        z-index: 1;
-      }
+    &:nth-of-type(1) {
+      z-index: 2;
+    }
 
-      &:last-child {
-        margin-right: 0;
-      }
+    &:nth-of-type(2) {
+      z-index: 1;
     }
 
-    .avatar {
-      height: $gl-padding;
-      width: $gl-padding;
+    &:last-child {
       margin-right: 0;
-      vertical-align: bottom;
     }
+  }
 
-    .avatar-counter {
-      height: $gl-padding;
-      border: 1px solid transparent;
-      background-color: $gl-text-color-tertiary;
-      font-weight: $gl-font-weight-bold;
-      padding: 0 $gl-padding-4;
-      line-height: $gl-padding;
-    }
+  .avatar {
+    height: $gl-padding;
+    width: $gl-padding;
+    margin-right: 0;
+    vertical-align: bottom;
+  }
+
+  .avatar-counter {
+    height: $gl-padding;
+    border: 1px solid transparent;
+    background-color: $gl-text-color-tertiary;
+    font-weight: $gl-font-weight-bold;
+    padding: 0 $gl-padding-4;
+    line-height: $gl-padding;
   }
 }
 
@@ -150,12 +164,6 @@ $item-weight-max-width: 48px;
   .issue-token-state-icon-closed {
     display: block;
   }
-
-  @include media-breakpoint-down(sm) {
-    &:not(.mr-item-path) {
-      order: 1;
-    }
-  }
 }
 
 .btn-item-remove {
@@ -179,6 +187,10 @@ $item-weight-max-width: 48px;
 }
 
 @include media-breakpoint-up(sm) {
+  .item-info-area {
+    flex-basis: 100%;
+  }
+
   .sortable-link {
     max-width: 90%;
   }
@@ -241,7 +253,8 @@ $item-weight-max-width: 48px;
     .item-title {
       min-width: 0;
       width: auto;
-      flex-basis: unset;
+      flex-basis: auto;
+      flex-shrink: 1;
       font-weight: $gl-font-weight-normal;
 
       .issue-token-state-icon-open,
@@ -250,6 +263,10 @@ $item-weight-max-width: 48px;
         margin-right: $gl-padding-8;
       }
     }
+
+    .item-info-area {
+      flex-basis: auto;
+    }
   }
 
   .item-contents {