Merge branch 'terraform-widget-ui-polish' into 'master'

Terraform MR widget UI polish

See merge request gitlab-org/gitlab!84627

app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue

@@ -55,19 +55,21 @@ export default {
     <div class="gl-display-flex">
       <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" class="gl-pl-0" />
       <div class="gl-w-full">
-        <div class="gl-flex-wrap gl-display-flex gl-w-full">
-          <div class="gl-mr-4 gl-display-flex gl-align-items-center">
-            <p v-safe-html="generateText(data.text)" class="gl-m-0"></p>
+        <div class="gl-display-flex gl-flex-nowrap">
+          <div class="gl-flex-wrap gl-display-flex gl-w-full">
+            <div class="gl-mr-4 gl-display-flex gl-align-items-center">
+              <p v-safe-html="generateText(data.text)" class="gl-m-0"></p>
+            </div>
+            <div v-if="data.link">
+              <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
+            </div>
+            <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'">
+              {{ data.badge.text }}
+            </gl-badge>
           </div>
-          <div v-if="data.link">
-            <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
-          </div>
-          <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'">
-            {{ data.badge.text }}
-          </gl-badge>
           <actions :widget="widgetLabel" :tertiary-buttons="data.actions" class="gl-ml-auto" />
         </div>
         <p

app/assets/javascripts/vue_merge_request_widget/components/extensions/utils.js

@@ -32,7 +32,7 @@ const textStyleTags = {
   [getStartTag('critical')]: '<span class="gl-font-weight-bold gl-text-red-800">',
   [getStartTag('same')]: '<span class="gl-font-weight-bold gl-text-gray-700">',
   [getStartTag('strong')]: '<span class="gl-font-weight-bold">',
-  [getStartTag('small')]: '<span class="gl-font-sm">',
+  [getStartTag('small')]: '<span class="gl-font-sm gl-text-gray-700">',
 };
 
 export const generateText = (text) => {

spec/frontend/vue_mr_widget/components/extensions/utils_spec.js

@@ -8,7 +8,7 @@ describe('generateText', () => {
     ${'%{danger_start}Hello world%{danger_end}'}                             | ${'<span class="gl-font-weight-bold gl-text-red-500">Hello world</span>'}
     ${'%{critical_start}Hello world%{critical_end}'}                         | ${'<span class="gl-font-weight-bold gl-text-red-800">Hello world</span>'}
     ${'%{same_start}Hello world%{same_end}'}                                 | ${'<span class="gl-font-weight-bold gl-text-gray-700">Hello world</span>'}
-    ${'%{small_start}Hello world%{small_end}'}                               | ${'<span class="gl-font-sm">Hello world</span>'}
+    ${'%{small_start}Hello world%{small_end}'}                               | ${'<span class="gl-font-sm gl-text-gray-700">Hello world</span>'}
     ${'%{strong_start}%{danger_start}Hello world%{danger_end}%{strong_end}'} | ${'<span class="gl-font-weight-bold"><span class="gl-font-weight-bold gl-text-red-500">Hello world</span></span>'}
     ${'%{no_exist_start}Hello world%{no_exist_end}'}                         | ${'Hello world'}
     ${['array']}                                                             | ${null}