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 f5159f22973367984a39e935bd2f26643deccda5..549cf64fb08f5a60299d134450ec7f5ce70677a2 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
@@ -94,6 +94,20 @@ export default {
     tertiaryActionsButtons() {
       return this.tertiaryButtons ? this.tertiaryButtons() : undefined;
     },
+    hydratedSummary() {
+      const structuredOutput = this.summary(this.collapsedData);
+      const summary = {
+        subject: generateText(
+          typeof structuredOutput === 'string' ? structuredOutput : structuredOutput.subject,
+        ),
+      };
+
+      if (structuredOutput.meta) {
+        summary.meta = generateText(structuredOutput.meta);
+      }
+
+      return summary;
+    },
   },
   watch: {
     isCollapsed(newVal) {
@@ -182,7 +196,13 @@ export default {
         <div class="gl-flex-grow-1">
           <template v-if="isLoadingSummary">{{ widgetLoadingText }}</template>
           <template v-else-if="hasFetchError">{{ widgetErrorText }}</template>
-          <div v-else v-safe-html="generateText(summary(collapsedData))"></div>
+          <div 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>
         </div>
         <actions
           :widget="$options.label || $options.name"
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/browser_performance/index.js b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/browser_performance/index.js
index c02d70baaf368c10e7e7317e2fe7bd5378973fa2..ea4039e62bdba0599192826f9dc891f5b1f55f6b 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/browser_performance/index.js
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/browser_performance/index.js
@@ -38,10 +38,10 @@ export default {
         },
       );
 
-      return `${text}
-      <br>
-      ${reportNumbersText}
-      `;
+      return {
+        subject: text,
+        meta: reportNumbersText,
+      };
     },
     statusIcon() {
       if (this.collapsedData.degraded.length || this.collapsedData.same.length) {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/load_performance/index.js b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/load_performance/index.js
index 7c9053d54163741979ae3403cdfcd1a29cc495db..d50f4cf4273ce518f69b6c244be8ab44078580a3 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/load_performance/index.js
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/load_performance/index.js
@@ -35,10 +35,10 @@ export default {
         },
       );
 
-      return `${text}
-      <br>
-      ${reportNumbersText}
-      `;
+      return {
+        subject: text,
+        meta: reportNumbersText,
+      };
     },
     statusIcon() {
       if (this.collapsedData.degraded.length || this.collapsedData.same.length) {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/status_checks/index.js b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/status_checks/index.js
index d9648be272145dff60a89833d757fea4b05932f1..2b167736874f99521975672e3e8fb78120a2f11a 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/status_checks/index.js
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/status_checks/index.js
@@ -46,13 +46,10 @@ export default {
         );
       }
 
-      return `
-        ${s__('StatusCheck|Status checks')}
-        <br>
-        <span class="gl-font-sm">
-          ${reports.join(__(', and '))}
-        </span>
-      `;
+      return {
+        subject: s__('StatusCheck|Status checks'),
+        meta: reports.join(__(', and ')),
+      };
     },
     statusIcon({ pending = [], failed = [] }) {
       if (failed.length > 0) {