Add sortable styles

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

@@ -43,6 +43,11 @@ export default {
       required: false,
       default: false,
     },
+    canReorder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isCondensed: {
       type: Boolean,
       required: false,
@@ -116,6 +121,7 @@ export default {
       :class="{
         'issue-token-link': isCondensed,
         'issue-main-info': !isCondensed,
+        'sortable-link': canReorder
       }"
       :href="computedPath"
       :title="issueTitle"
@@ -162,7 +168,7 @@ export default {
       v-tooltip
       ref="removeButton"
       type="button"
-      class="js-issue-token-remove-button flex-right sortable-hidden"
+      class="js-issue-token-remove-button flex-right"
       :class="{
         'issue-token-remove-button': isCondensed,
         'btn btn-default': !isCondensed

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

@@ -101,8 +101,10 @@ export default {
     if (this.canReorder) {
       this.sortable = Sortable.create(this.$refs.list, {
         animation: 200,
+        forceFallback: true,
+        fallbackClass: 'is-dragging',
+        fallbackOnBody: true,
         ghostClass: 'is-ghost',
-        chosenClass: "sortable-chosen",
         onEnd: this.reordered,
       });
     }
@@ -164,7 +166,8 @@ export default {
       <div
         class="related-issues-token-body panel-body"
         :class="{
-            'collapsed': !shouldShowTokenBody
+          'collapsed': !shouldShowTokenBody,
+          'sortable-container': canReorder
         }">
         <div
           v-if="isFetching"
@@ -175,13 +178,18 @@ export default {
         </div>
         <ul
           ref="list"
-          class="flex-list content-list issuable-list"
+          class="flex-list issuable-list"
+          :class="{ 'content-list' : !canReorder }"
         >
           <li
             :key="issue.id"
             v-for="issue in relatedIssues"
-            class="js-related-issues-token-list-item"
-            :class="{ 'is-dragging': canReorder }"
+            class="js-related-issues-token-list-item "
+            :class="{
+              'user-can-drag': canReorder,
+              'sortable-row': canReorder,
+              card: canReorder
+            }"
           >
             <issue-token
               event-namespace="relatedIssue"
@@ -191,6 +199,7 @@ export default {
               :path="issue.path"
               :state="issue.state"
               :can-remove="canAdmin"
+              :can-reorder="canReorder"
             />
           </li>
         </ul>

app/assets/stylesheets/framework/sortable.scss

-.sortable-chosen .sortable-hidden {
-  display: none;
+.sortable-container {
+  background-color: $gray-light;
+
+  .flex-list {
+    padding: 5px;
+    margin-bottom: 0;
+  }
+}
+
+.sortable-row {
+  .flex-row {
+    display: flex;
+
+    &.issue-info-container {
+      padding-right: 0;
+    }
+  }
+
+  .sortable-link {
+    color: black;
+  }
 }

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

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