Even out spacing in panel body token list

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

@@ -126,7 +126,7 @@ export default {
         </li>
       </ul>
     </div>
-    <div class="clearfix prepend-top-10">
+    <div class="add-issuable-form-actions clearfix">
       <button
         ref="addButton"
         type="button"

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

@@ -146,9 +146,9 @@ export default {
       </div>
       <div
         v-if="hasRelatedIssues"
-        class="panel-body">
+        class="related-issues-token-body panel-body">
         <ul
-          class="related-issues-token-body">
+          class="related-issues-token-list">
           <li
             :key="issue.id"
             v-for="issue in relatedIssues"

app/assets/stylesheets/framework/panels.scss

-@mixin panel {
-  .panel-heading {
-    padding: $gl-vert-padding $gl-padding;
-    line-height: 36px;
-
-    .controls {
-      margin-top: -2px;
-      float: right;
-    }
-
-    .dropdown-menu-toggle {
-      line-height: 20px;
-    }
-
-    .badge {
-      margin-top: -2px;
-      margin-left: 5px;
-    }
-
-    &.split {
-      display: flex;
-      align-items: center;
-    }
-
-    .left {
-      flex: 1 1 auto;
-    }
-
-    .right {
-      flex: 0 0 auto;
-      text-align: right;
-    }
+.panel {
+  margin-bottom: $gl-padding;
+}
+
+.panel-slim {
+  @extend .panel;
+  margin-bottom: $gl-vert-padding;
+}
+
+
+.panel-heading {
+  padding: $gl-vert-padding $gl-padding;
+  line-height: 36px;
+
+  .controls {
+    margin-top: -2px;
+    float: right;
   }
 
-  .panel-empty-heading {
-    border-bottom: 0;
+  .dropdown-menu-toggle {
+    line-height: 20px;
   }
 
-  .panel-body {
-    padding: $gl-padding;
+  .badge {
+    margin-top: -2px;
+    margin-left: 5px;
+  }
 
-    .form-actions {
-      margin: -$gl-padding;
-      margin-top: $gl-padding;
-    }
+  &.split {
+    display: flex;
+    align-items: center;
   }
 
-  .panel-title {
-    font-size: inherit;
-    line-height: inherit;
+  .left {
+    flex: 1 1 auto;
+  }
+
+  .right {
+    flex: 0 0 auto;
+    text-align: right;
   }
 }
 
-.panel {
-  @include panel;
-  margin-bottom: $gl-padding;
+.panel-empty-heading {
+  border-bottom: 0;
 }
 
-.panel-slim {
-  @extend .panel;
-  @include panel;
-  margin-bottom: $gl-vert-padding;
+.panel-body {
+  padding: $gl-padding;
+
+  .form-actions {
+    margin: -$gl-padding;
+    margin-top: $gl-padding;
+  }
+}
+
+.panel-title {
+  font-size: inherit;
+  line-height: inherit;
 }

app/assets/stylesheets/pages/issuable.scss

@@ -768,3 +768,7 @@
     outline: none;
   }
 }
+
+.add-issuable-form-actions {
+  margin-top: $gl-padding;
+}

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

+$token_spacing_bottom: 0.5em;
+
 .related-issues-block {
   margin-top: 3 * $gl-vert-padding;
 }
@@ -21,6 +23,10 @@
 }
 
 .related-issues-token-body {
+  padding-bottom: calc(#{$gl-padding} - #{$token_spacing_bottom});
+}
+
+.related-issues-token-list {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 0;
@@ -30,6 +36,6 @@
 
 .related-issues-token-list-item {
   max-width: 100%;
-  margin-bottom: 0.5em;
+  margin-bottom: $token_spacing_bottom;
   margin-right: 5px;
 }