1 files changed, 7 insertions, 8 deletions
diff --git a/app/assets/javascripts/related_issues/components/issue_token.vue b/app/assets/javascripts/related_issues/components/issue_token.vue
index 9665ed173b9..abbd612d3ec 100644
--- a/app/assets/javascripts/related_issues/components/issue_token.vue
+++ b/app/assets/javascripts/related_issues/components/issue_token.vue
@@ -48,7 +48,7 @@ export default {
 <template>
   <div
     :class="{
-      'issue-token': isCondensed,
+      'issue-token gl-display-inline-flex gl-align-items-stretch gl-max-w-full gl-line-height-24 gl-white-space-nowrap': isCondensed,
       'flex-row issuable-info-container': !isCondensed,
     }"
   >
@@ -57,7 +57,7 @@ export default {
       ref="link"
       v-gl-tooltip
       :class="{
-        'issue-token-link': isCondensed,
+        'issue-token-link gl-display-inline-flex gl-min-w-0 gl-text-gray-500': isCondensed,
         'issuable-main-info': !isCondensed,
       }"
       :href="computedPath"
@@ -69,19 +69,19 @@ export default {
         v-if="hasTitle"
         ref="title"
         :class="{
-          'issue-token-title issue-token-end': isCondensed,
+          'issue-token-title issue-token-end gl-overflow-hidden gl-display-flex gl-align-items-baseline gl-text-gray-500 gl-pl-3': isCondensed,
           'issue-title block-truncated': !isCondensed,
-          'issue-token-title-standalone': !canRemove,
+          'gl-rounded-top-right-small gl-rounded-bottom-right-small gl-pr-3': !canRemove,
         }"
         class="js-issue-token-title"
       >
-        <span class="issue-token-title-text">{{ title }}</span>
+        <span class="gl-text-truncate">{{ title }}</span>
       </component>
       <component
         :is="innerComponentType"
         ref="reference"
         :class="{
-          'issue-token-reference': isCondensed,
+          'issue-token-reference gl-display-flex gl-align-items-center gl-rounded-top-left-small gl-rounded-bottom-left-small gl-px-3': isCondensed,
           'issuable-info': !isCondensed,
         }"
       >
@@ -103,7 +103,7 @@ export default {
       ref="removeButton"
       v-gl-tooltip
       :class="{
-        'issue-token-remove-button': isCondensed,
+        'issue-token-remove-button gl-display-flex gl-align-items-center gl-px-3 gl-border-0 gl-rounded-top-right-small gl-rounded-bottom-right-small gl-text-gray-500': isCondensed,
         'btn btn-default': !isCondensed,
       }"
       :title="removeButtonLabel"
@@ -111,7 +111,6 @@ export default {
       :disabled="removeDisabled"
       data-testid="removeBtn"
       type="button"
-      class="js-issue-token-remove-button"
       @click="onRemoveRequest"
     >
       <gl-icon name="close" />