Fix stylelint warnings in related_items_list.scss

This commit rearranges the styles in related_items_list
to adhere to stylelint's warnings. It also adds some
utility classes where applicable

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

@@ -72,7 +72,7 @@ export default {
 <template>
   <div ref="milestoneDetails" class="issue-milestone-details">
     <icon :size="16" class="inline icon" name="clock" />
-    <span class="milestone-title">{{ milestone.title }}</span>
+    <span class="milestone-title d-inline-block">{{ milestone.title }}</span>
     <gl-tooltip :target="() => $refs.milestoneDetails" placement="bottom" class="js-item-milestone">
       <span class="bold">{{ __('Milestone') }}</span> <br />
       <span>{{ milestone.title }}</span> <br />

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

@@ -81,8 +81,11 @@ export default {
             :title="stateTitle"
             :aria-label="state"
             data-html="true"
+            class="d-xl-none"
           />
-          <span v-tooltip :title="itemPath" class="path-id-text">{{ itemPath }}</span>
+          <span v-tooltip :title="itemPath" class="path-id-text d-inline-block">{{
+            itemPath
+          }}</span>
           {{ pathIdSeparator }}{{ itemId }}
         </div>
         <div class="item-meta-child d-flex align-items-center">

app/assets/stylesheets/components/related_items_list.scss

@@ -11,6 +11,10 @@ $item-weight-max-width: 48px;
   }
 }
 
+.sortable-link {
+  max-width: 85%;
+}
+
 .item-body {
   display: flex;
   position: relative;
@@ -18,13 +22,6 @@ $item-weight-max-width: 48px;
   padding: $gl-padding-8;
   line-height: $gl-line-height;
 
-  .item-contents {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    flex-grow: 1;
-  }
-
   .issue-token-state-icon-open {
     color: $green-500;
   }
@@ -66,17 +63,31 @@ $item-weight-max-width: 48px;
       font-weight: $gl-font-weight-bold;
     }
 
-    .sortable-link {
-      max-width: 85%;
-    }
-
     .issue-token-state-icon-open,
     .issue-token-state-icon-closed {
       display: none;
     }
   }
 
-  .item-meta {
+  .item-path-id .path-id-text,
+  .item-milestone .milestone-title,
+  .item-due-date,
+  .item-weight .board-card-info-text {
+    color: $gl-text-color-secondary;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+.item-contents {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-grow: 1;
+}
+
+.item-meta {
   display: flex;
   flex-wrap: wrap;
   flex-basis: 100%;
@@ -88,10 +99,6 @@ $item-weight-max-width: 48px;
     display: flex;
     flex-wrap: wrap;
     flex-basis: 100%;
-
-      .item-due-date,
-      .item-weight {
-        margin-left: $gl-padding-8;
   }
 
   .item-milestone,
@@ -102,53 +109,17 @@ $item-weight-max-width: 48px;
   .item-milestone {
     text-decoration: none;
     max-width: $item-milestone-max-width;
-      }
 
-      .item-due-date {
-        margin-right: 0;
+    .ic-clock {
+      color: $gl-text-color-tertiary;
+      margin-right: $gl-padding-4;
+    }
   }
 
   .item-weight {
     margin-right: 0;
     max-width: $item-weight-max-width;
   }
-    }
-
-    .item-path-id .path-id-text,
-    .item-milestone .milestone-title,
-    .item-due-date,
-    .item-weight .board-card-info-text {
-      color: $gl-text-color-secondary;
-      display: inline-block;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .item-path-id {
-      margin-top: $gl-padding-4;
-      font-size: $gl-font-size-xs;
-      white-space: nowrap;
-
-      .path-id-text {
-        font-weight: $gl-font-weight-bold;
-        max-width: $item-path-max-width;
-      }
-
-      .issue-token-state-icon-open,
-      .issue-token-state-icon-closed {
-        display: block;
-      }
-
-      &:not(.mr-item-path) {
-        order: 1;
-      }
-    }
-
-    .item-milestone .ic-clock {
-      color: $gl-text-color-tertiary;
-      margin-right: $gl-padding-4;
-    }
 
   .item-assignees {
     order: 2;
@@ -188,9 +159,29 @@ $item-weight-max-width: 48px;
       line-height: $gl-padding;
     }
   }
+}
+
+.item-path-id {
+  margin-top: $gl-padding-4;
+  font-size: $gl-font-size-xs;
+  white-space: nowrap;
+
+  .path-id-text {
+    font-weight: $gl-font-weight-bold;
+    max-width: $item-path-max-width;
+  }
+
+  .issue-token-state-icon-open,
+  .issue-token-state-icon-closed {
+    display: block;
+  }
+
+  &:not(.mr-item-path) {
+    order: 1;
   }
+}
 
-  .btn-item-remove {
+.btn-item-remove {
   position: absolute;
   right: 0;
   top: $gl-padding-4 / 2;
@@ -203,7 +194,6 @@ $item-weight-max-width: 48px;
   &:hover {
     color: $gl-text-color;
   }
-  }
 }
 
 .mr-status-wrapper,
@@ -212,18 +202,20 @@ $item-weight-max-width: 48px;
 }
 
 @include media-breakpoint-up(sm) {
-  .item-body {
-    .item-contents .item-title {
-      .mr-title-link,
   .sortable-link {
     max-width: 90%;
   }
-    }
-  }
 }
 
 /* Small devices (landscape phones, 768px and up) */
 @include media-breakpoint-up(md) {
+  .sortable-link {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
   .item-body {
     .item-contents {
       min-width: 0;
@@ -235,13 +227,11 @@ $item-weight-max-width: 48px;
         // positioned absolutely
         width: 95%;
         margin-bottom: $gl-padding-4;
+      }
+    }
 
-        .mr-title-link,
-        .sortable-link {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          max-width: 100%;
+    .btn-item-remove {
+      order: 1;
     }
   }
 
@@ -267,12 +257,6 @@ $item-weight-max-width: 48px;
       order: 2;
     }
   }
-    }
-
-    .btn-item-remove {
-      order: 1;
-    }
-  }
 }
 
 /* Medium devices (desktops, 992px and up) */
@@ -287,11 +271,6 @@ $item-weight-max-width: 48px;
     .item-meta .item-path-id {
       font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
     }
-
-    .issue-token-state-icon-open,
-    .issue-token-state-icon-closed {
-      margin-right: $gl-padding-4;
-    }
   }
 }
 
@@ -301,10 +280,6 @@ $item-weight-max-width: 48px;
     padding: $gl-padding-8;
     padding-left: $gl-padding;
 
-    .item-contents {
-      flex-wrap: nowrap;
-      overflow: hidden;
-
     .item-title {
       display: flex;
       margin-bottom: 0;
@@ -313,15 +288,6 @@ $item-weight-max-width: 48px;
       flex-basis: unset;
       font-weight: $gl-font-weight-normal;
 
-        .mr-title-link,
-        .sortable-link {
-          display: block;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-          line-height: 1.3;
-        }
-
       .issue-token-state-icon-open,
       .issue-token-state-icon-closed {
         display: block;
@@ -333,6 +299,12 @@ $item-weight-max-width: 48px;
         margin-top: 0;
       }
     }
+  }
+
+  .item-contents {
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
 
   .item-meta {
     margin-top: 0;
@@ -340,21 +312,17 @@ $item-weight-max-width: 48px;
     flex: 1;
     flex-wrap: nowrap;
 
-        .item-path-id {
-          order: 0;
-          margin-top: 0;
+    .item-meta-child {
       margin-left: $gl-padding-8;
-          margin-right: auto;
-
-          .issue-token-state-icon-open,
-          .issue-token-state-icon-closed {
-            display: none;
+      flex-wrap: nowrap;
     }
   }
 
-        .item-meta-child {
+  .item-path-id {
+    order: 0;
+    margin-top: 0;
     margin-left: $gl-padding-8;
-          flex-wrap: nowrap;
+    margin-right: auto;
   }
 
   .item-assignees {
@@ -374,8 +342,6 @@ $item-weight-max-width: 48px;
       border-radius: $gl-padding-24;
     }
   }
-      }
-    }
 
   .btn-item-remove {
     position: relative;
@@ -389,5 +355,12 @@ $item-weight-max-width: 48px;
       border-color: $border-color;
     }
   }
+
+  .sortable-link {
+    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 1.3;
   }
 }