Remove related items CSS properties and add utility classes

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

@@ -45,10 +45,10 @@ export default {
       'issuable-info-container': !canReorder,
       'card-body': canReorder,
     }"
-    class="item-body"
+    class="item-body d-flex align-items-center p-2 p-lg-3 p-xl-2 pl-xl-3"
   >
-    <div class="item-contents">
-      <div class="item-title d-flex align-items-center">
+    <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
+      <div class="item-title d-flex align-items-center mb-1 mb-xl-0">
         <icon
           v-if="hasState"
           v-tooltip
@@ -65,13 +65,15 @@ export default {
           name="eye-slash"
           :size="16"
           :title="__('Confidential')"
-          class="confidential-icon append-right-4"
+          class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
           :aria-label="__('Confidential')"
         />
         <a :href="computedPath" class="sortable-link">{{ title }}</a>
       </div>
-      <div class="item-meta">
-        <div class="d-flex align-items-center item-path-id">
+      <div class="item-meta d-flex flex-wrap mt-xl-0 justify-content-xl-end flex-xl-nowrap">
+        <div
+          class="d-flex align-items-center item-path-id order-md-0 mt-md-0 mt-1 ml-xl-2 mr-xl-auto"
+        >
           <icon
             v-if="hasState"
             v-tooltip
@@ -88,7 +90,9 @@ export default {
           }}</span>
           {{ pathIdSeparator }}{{ itemId }}
         </div>
-        <div class="item-meta-child d-flex align-items-center">
+        <div
+          class="item-meta-child d-flex align-items-center order-0 flex-wrap mr-md-1 ml-md-auto ml-xl-2 flex-xl-nowrap"
+        >
           <span v-if="hasPipeline" class="mr-ci-status pr-2">
             <a :href="pipelineStatus.details_path">
               <ci-icon v-gl-tooltip :status="pipelineStatus" :title="pipelineStatusTooltip" />
@@ -105,7 +109,7 @@ export default {
         <issue-assignees
           v-if="assignees.length"
           :assignees="assignees"
-          class="item-assignees d-inline-flex"
+          class="item-assignees d-inline-flex align-items-center align-self-end ml-auto ml-md-0 mb-md-0 order-2 flex-xl-grow-0 mt-xl-0 mr-xl-1"
         />
       </div>
     </div>
@@ -115,7 +119,7 @@ export default {
       v-tooltip
       :disabled="removeDisabled"
       type="button"
-      class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button"
+      class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button mr-xl-0 align-self-xl-center"
       title="Remove"
       aria-label="Remove"
       @click="onRemoveRequest"

app/assets/stylesheets/components/related_items_list.scss

@@ -16,10 +16,7 @@ $item-weight-max-width: 48px;
 }
 
 .item-body {
-  display: flex;
   position: relative;
-  align-items: center;
-  padding: $gl-padding-8;
   line-height: $gl-line-height;
 
   .issue-token-state-icon-open {
@@ -49,14 +46,11 @@ $item-weight-max-width: 48px;
   }
 
   .confidential-icon {
-    align-self: baseline;
     color: $orange-600;
-    margin-right: $gl-padding-4;
   }
 
   .item-title {
     flex-basis: 100%;
-    margin-bottom: $gl-padding-8;
     font-size: $gl-font-size-small;
 
     &.mr-title {
@@ -80,24 +74,12 @@ $item-weight-max-width: 48px;
   }
 }
 
-.item-contents {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex-grow: 1;
-}
-
 .item-meta {
-  display: flex;
-  flex-wrap: wrap;
   flex-basis: 100%;
   font-size: $gl-font-size-small;
   color: $gl-text-color-secondary;
 
   .item-meta-child {
-    order: 0;
-    display: flex;
-    flex-wrap: wrap;
     flex-basis: 100%;
   }
 
@@ -117,16 +99,10 @@ $item-weight-max-width: 48px;
   }
 
   .item-weight {
-    margin-right: 0;
     max-width: $item-weight-max-width;
   }
 
   .item-assignees {
-    order: 2;
-    align-self: flex-end;
-    align-items: center;
-    margin-left: auto;
-
     .user-avatar-link {
       margin-right: -$gl-padding-4;
 
@@ -162,7 +138,6 @@ $item-weight-max-width: 48px;
 }
 
 .item-path-id {
-  margin-top: $gl-padding-4;
   font-size: $gl-font-size-xs;
   white-space: nowrap;
 
@@ -176,8 +151,10 @@ $item-weight-max-width: 48px;
     display: block;
   }
 
-  &:not(.mr-item-path) {
-    order: 1;
+  @include media-breakpoint-down(sm) {
+    &:not(.mr-item-path) {
+      order: 1;
+    }
   }
 }
 
@@ -219,15 +196,14 @@ $item-weight-max-width: 48px;
   .item-body {
     .item-contents {
       min-width: 0;
+    }
 
-      .item-title {
-        flex-basis: unset;
-        // 95% because we compensate
-        // for remove button which is
-        // positioned absolutely
-        width: 95%;
-        margin-bottom: $gl-padding-4;
-      }
+    .item-title {
+      flex-basis: unset;
+      // 95% because we compensate
+      // for remove button which is
+      // positioned absolutely
+      width: 95%;
     }
 
     .btn-item-remove {
@@ -236,34 +212,19 @@ $item-weight-max-width: 48px;
   }
 
   .item-meta {
-    .item-path-id {
-      order: 0;
-      margin-top: 0;
-    }
-
     .item-meta-child {
       flex-basis: unset;
-      margin-left: auto;
-      margin-right: $gl-padding-4;
 
       ~ .item-assignees {
         margin-left: $gl-padding-4;
       }
     }
-
-    .item-assignees {
-      margin-bottom: 0;
-      margin-left: 0;
-      order: 2;
-    }
   }
 }
 
 /* Medium devices (desktops, 992px and up) */
 @include media-breakpoint-up(lg) {
   .item-body {
-    padding: $gl-padding;
-
     .item-title {
       font-size: $gl-font-size;
     }
@@ -277,12 +238,7 @@ $item-weight-max-width: 48px;
 /* Large devices (large desktops, 1200px and up) */
 @include media-breakpoint-up(xl) {
   .item-body {
-    padding: $gl-padding-8;
-    padding-left: $gl-padding;
-
     .item-title {
-      display: flex;
-      margin-bottom: 0;
       min-width: 0;
       width: auto;
       flex-basis: unset;
@@ -293,43 +249,18 @@ $item-weight-max-width: 48px;
         display: block;
         margin-right: $gl-padding-8;
       }
-
-      .confidential-icon {
-        align-self: auto;
-        margin-top: 0;
-      }
     }
   }
 
   .item-contents {
-    flex-wrap: nowrap;
     overflow: hidden;
   }
 
   .item-meta {
-    margin-top: 0;
-    justify-content: flex-end;
     flex: 1;
-    flex-wrap: nowrap;
-
-    .item-meta-child {
-      margin-left: $gl-padding-8;
-      flex-wrap: nowrap;
-    }
-  }
-
-  .item-path-id {
-    order: 0;
-    margin-top: 0;
-    margin-left: $gl-padding-8;
-    margin-right: auto;
   }
 
   .item-assignees {
-    flex-grow: 0;
-    margin-top: 0;
-    margin-right: $gl-padding-4;
-
     .avatar {
       height: $gl-padding-24;
       width: $gl-padding-24;
@@ -345,10 +276,8 @@ $item-weight-max-width: 48px;
 
   .btn-item-remove {
     position: relative;
-    align-self: center;
     top: initial;
     right: 0;
-    margin-right: 0;
     padding: $btn-sm-side-margin;
 
     &:hover {
@@ -357,10 +286,6 @@ $item-weight-max-width: 48px;
   }
 
   .sortable-link {
-    display: block;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
     line-height: 1.3;
   }
 }