Update Epic issue item styling to match with related issues styling

app/assets/stylesheets/pages/issues.scss

@@ -392,7 +392,6 @@ ul.related-merge-requests > li {
 
 .issue-token-title-text {
   overflow: hidden;
-  max-width: 264px;
   text-overflow: ellipsis;
 }
 

ee/app/assets/javascripts/related_issues/components/issue_item.vue

@@ -28,14 +28,8 @@ export default {
     }"
     class="flex"
   >
-    <div class="block-truncated append-right-10">
-      <a
-        :href="computedPath"
-        class="issue-token-title-text sortable-link"
-      >
-        {{ title }}
-      </a>
-      <div class="block text-secondary">
+    <div class="block-truncated append-right-8 d-inline-flex">
+      <div class="block text-secondary append-right-default">
         <icon
           v-if="hasState"
           v-tooltip
@@ -47,6 +41,12 @@ export default {
         />
         {{ displayReference }}
       </div>
+      <a
+        :href="computedPath"
+        class="issue-token-title-text sortable-link"
+      >
+        {{ title }}
+      </a>
     </div>
     <button
       v-if="canRemove"
@@ -54,7 +54,7 @@ export default {
       v-tooltip
       :disabled="removeDisabled"
       type="button"
-      class="btn btn-default js-issue-item-remove-button flex-align-self-center flex-right
+      class="btn btn-default js-issue-item-remove-button issue-item-remove-button flex-align-self-center flex-right
       qa-remove-issue-button"
       title="Remove"
       aria-label="Remove"

ee/app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -211,7 +211,7 @@ issue-count-badge-add-button btn btn-sm btn-default qa-add-issues-button"
           'collapsed': !shouldShowTokenBody,
           'sortable-container': canReorder
         }"
-        class="related-issues-token-body card-body"
+        class="related-issues-token-body"
       >
         <div
           v-if="isFetching"
@@ -237,7 +237,7 @@ issue-count-badge-add-button btn btn-sm btn-default qa-add-issues-button"
             }"
             :data-key="issue.id"
             :data-epic-issue-id="issue.epic_issue_id"
-            class="js-related-issues-token-list-item"
+            class="js-related-issues-token-list-item related-issues-list-item pt-0 pb-0"
           >
             <issue-item
               :id-key="issue.id"

ee/app/assets/stylesheets/framework/sortable.scss

@@ -35,3 +35,58 @@
     }
   }
 }
+
+.related-issues-list-item {
+  .card-body,
+  .issuable-info-container {
+    padding: $gl-padding-4 $gl-padding-4 $gl-padding-4 $gl-padding;
+
+    .block-truncated {
+      padding: $gl-padding-8 0;
+      line-height: $gl-btn-line-height;
+    }
+
+    @include media-breakpoint-down(md) {
+      padding-left: $gl-padding;
+
+      .block-truncated {
+        flex-direction: column-reverse;
+        padding: $gl-padding-4 0;
+
+        .text-secondary {
+          margin-top: $gl-padding-4;
+        }
+
+        .issue-token-title-text {
+          display: block;
+        }
+      }
+
+      .issue-item-remove-button {
+        align-self: baseline;
+      }
+    }
+
+    @include media-breakpoint-only(md) {
+      .block-truncated .issue-token-title-text {
+        white-space: nowrap;
+      }
+
+      .issue-item-remove-button {
+        align-self: center;
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      padding-left: $gl-padding-8;
+
+      .block-truncated .issue-token-title-text {
+        white-space: normal;
+      }
+    }
+  }
+
+  &.is-dragging {
+    padding: 0;
+  }
+}

ee/app/assets/stylesheets/pages/issues/related_issues.scss

@@ -33,6 +33,11 @@ $token-spacing-bottom: 0.5em;
 
   li .issuable-info-container {
     padding-left: $gl-padding;
+    padding-right: $gl-padding-4;
+
+    @include media-breakpoint-down(sm) {
+      padding-left: $gl-padding-8;
+    }
   }
 
   a.issuable-main-info:hover {

ee/changelogs/unreleased/7600-epic-issues-list-styling-updates.yml

+---
+title: Update related issues list styling to be more space efficient
+merge_request: 7784
+author:
+type: changed