Fix styling

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

+<script>
+import eventHub from '../event_hub';
+import tooltip from '../../../vue_shared/directives/tooltip';
+
+export default {
+  name: 'IssueItem',
+  data() {
+    return {
+      removeDisabled: false,
+    };
+  },
+  props: {
+    idKey: {
+      type: Number,
+      required: true,
+    },
+    displayReference: {
+      type: String,
+      required: true,
+    },
+    eventNamespace: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    path: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    state: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    canRemove: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    canReorder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  computed: {
+    hasState() {
+      return this.state && this.state.length > 0;
+    },
+    stateTitle() {
+      return this.isOpen ? 'Open' : 'Closed';
+    },
+    isOpen() {
+      return this.state === 'opened';
+    },
+    isClosed() {
+      return this.state === 'closed';
+    },
+    hasTitle() {
+      return this.title.length > 0;
+    },
+    computedLinkElementType() {
+      return this.path.length > 0 ? 'a' : 'span';
+    },
+    computedPath() {
+      return this.path.length ? this.path : null;
+    },
+  },
+
+  methods: {
+    onRemoveRequest() {
+      let namespacePrefix = '';
+      if (this.eventNamespace && this.eventNamespace.length > 0) {
+        namespacePrefix = `${this.eventNamespace}-`;
+      }
+
+      eventHub.$emit(`${namespacePrefix}removeRequest`, this.idKey);
+
+      this.removeDisabled = true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex"
+    :class="{ 'issue-info-container': !canReorder }"
+  >
+    <div class="block-truncated append-right-10">
+      <a
+        class="issue-token-title-text sortable-link"
+        :href="computedPath"
+      >
+        {{ title }}
+      </a>
+      <div class="block text-secondary">
+        <i
+          ref="stateIcon"
+          v-if="hasState"
+          v-tooltip
+          class="fa"
+          :class="{
+            'issue-token-state-icon-open fa-circle-o': isOpen,
+            'issue-token-state-icon-closed fa-minus': isClosed,
+          }"
+          :title="stateTitle"
+          :aria-label="state"
+        >
+        </i>{{ displayReference }}
+      </div>
+    </div>
+    <button
+      v-if="canRemove"
+      v-tooltip
+      ref="removeButton"
+      type="button"
+      class="btn btn-default js-issue-token-remove-button flex-align-self-center flex-right"
+      title="Remove"
+      aria-label="Remove"
+      :disabled="removeDisabled"
+      @click="onRemoveRequest"
+    >
+      <i
+        class="fa fa-times"
+        aria-hidden="true"
+      >
+      </i>
+    </button>
+  </div>
+</template>

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

@@ -2,7 +2,7 @@
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import eventHub from '../event_hub';
-import issueToken from './issue_token.vue';
+import issueItem from './issue_item.vue';
 import addIssuableForm from './add_issuable_form.vue';
 
 export default {
@@ -70,7 +70,7 @@ export default {
   components: {
     loadingIcon,
     addIssuableForm,
-    issueToken,
+    issueItem,
   },
   computed: {
     hasRelatedIssues() {
@@ -94,8 +94,15 @@ export default {
       eventHub.$emit('toggleAddRelatedIssuesForm');
     },
     reordered(event) {
+      this.removeDraggingCursor();
       console.log(event);
     },
+    addDraggingCursor() {
+      document.body.classList.add('is-dragging');
+    },
+    removeDraggingCursor() {
+      document.body.classList.remove('is-dragging');
+    },
   },
   mounted() {
     if (this.canReorder) {
@@ -105,6 +112,7 @@ export default {
         fallbackClass: 'is-dragging',
         fallbackOnBody: true,
         ghostClass: 'is-ghost',
+        onStart: this.addDraggingCursor,
         onEnd: this.reordered,
       });
     }
@@ -191,7 +199,7 @@ export default {
               card: canReorder
             }"
           >
-            <issue-token
+            <issue-item
               event-namespace="relatedIssue"
               :id-key="issue.id"
               :display-reference="issue.reference"

app/assets/stylesheets/framework/common.scss

@@ -101,7 +101,7 @@ hr {
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  > div,
+  > div:not(.block),
   .str-truncated {
     display: inline;
   }
@@ -475,5 +475,8 @@ img.emoji {
 .append-bottom-20 { margin-bottom: 20px; }
 .append-bottom-default { margin-bottom: $gl-padding; }
 .inline { display: inline-block; }
+.block { display: block; }
+.flex { display: flex; }
 .center { text-align: center; }
 .vertical-align-middle { vertical-align: middle; }
+.flex-align-self-center { align-self: center; }

app/assets/stylesheets/pages/boards.scss

@@ -26,6 +26,7 @@
 
 .is-ghost {
   opacity: 0.3;
+  pointer-events: none;
 }
 
 .dropdown-menu-issues-board-new {

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

@@ -31,9 +31,8 @@ $token_spacing_bottom: 0.5em;
     opacity: 0;
   }
 
-  li:not(.card) .issue-info-container {
+  li .issue-info-container {
     padding-left: $gl-padding;
-    padding-right: $gl-padding;
   }
 
   a.issue-main-info:hover {