2 files changed, 19 insertions, 14 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index 3d03dbd9db3..e8cc9b2eb2a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -1,12 +1,7 @@
 <script>
-import {
-  GlButton,
-  GlLoadingIcon,
-  GlSafeHtmlDirective,
-  GlTooltipDirective,
-  GlIntersectionObserver,
-} from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlTooltipDirective, GlIntersectionObserver } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { DynamicScroller, DynamicScrollerItem } from 'vendor/vue-virtual-scroller';
 import { sprintf, s__, __ } from '~/locale';
 import Poll from '~/lib/utils/poll';
@@ -40,7 +35,7 @@ export default {
     StateContainer,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
     GlTooltip: GlTooltipDirective,
   },
   data() {
@@ -323,19 +318,23 @@ export default {
       @mouseup="onRowMouseUp"
     >
       <div
+        :class="{ 'gl-h-full': isLoadingSummary }"
         class="media-body gl-display-flex gl-flex-direction-row! gl-w-full"
         data-testid="widget-extension-top-level"
       >
-        <div class="gl-flex-grow-1" data-testid="widget-extension-top-level-summary">
+        <div
+          class="gl-flex-grow-1 gl-display-flex gl-align-items-center"
+          data-testid="widget-extension-top-level-summary"
+        >
           <template v-if="isLoadingSummary">{{ widgetLoadingText }}</template>
           <template v-else-if="hasFetchError">{{ widgetErrorText }}</template>
-          <div v-else>
+          <template v-else>
             <span v-safe-html="hydratedSummary.subject"></span>
             <template v-if="hydratedSummary.meta">
               <br />
               <span v-safe-html="hydratedSummary.meta" class="gl-font-sm"></span>
             </template>
-          </div>
+          </template>
         </div>
         <actions
           :widget="$options.label || $options.name"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
index a10e5efa0e7..fa369d23b6c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
@@ -1,6 +1,7 @@
 <script>
-import { GlBadge, GlLink, GlSafeHtmlDirective, GlModalDirective } from '@gitlab/ui';
+import { GlBadge, GlLink, GlModalDirective } from '@gitlab/ui';
 import { isArray } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import Actions from '../action_buttons.vue';
 import StatusIcon from './status_icon.vue';
 import { generateText } from './utils';
@@ -14,7 +15,7 @@ export default {
     Actions,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
     GlModal: GlModalDirective,
   },
   props: {
@@ -97,7 +98,12 @@ export default {
             <div v-if="data.supportingText">
               <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
             </div>
-            <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
+            <gl-badge
+              v-if="data.badge"
+              :variant="data.badge.variant || 'info'"
+              size="sm"
+              class="gl-ml-2"
+            >
               {{ data.badge.text }}
             </gl-badge>
           </div>