Merge branch 'ph/mrExtensionAlignmentFixes' into 'master'

Fixes icon and collapse button not aligning correctly

See merge request gitlab-org/gitlab!71928

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

@@ -30,6 +30,7 @@ export default {
 <template>
   <div>
     <gl-dropdown
+      v-if="tertiaryButtons"
       :text="dropdownLabel"
       icon="ellipsis_v"
       no-caret
@@ -38,6 +39,7 @@ export default {
       lazy
       text-sr-only
       size="small"
+      toggle-class="gl-p-2!"
       class="gl-display-block gl-md-display-none!"
     >
       <gl-dropdown-item

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

@@ -138,18 +138,21 @@ export default {
 <template>
   <section class="media-section" data-testid="widget-extension">
     <div class="media gl-p-5">
-      <status-icon :name="widgetLabel" :is-loading="isLoadingSummary" :icon-name="statusIconName" />
-      <div
-        class="media-body gl-display-flex gl-align-self-center gl-align-items-center gl-flex-direction-row!"
-      >
+      <status-icon
+        :name="$options.label || $options.name"
+        :is-loading="isLoadingSummary"
+        :icon-name="statusIconName"
+      />
+      <div class="media-body gl-display-flex gl-flex-direction-row!">
         <div class="gl-flex-grow-1">
           <template v-if="isLoadingSummary">{{ widgetLoadingText }}</template>
           <div v-else v-safe-html="summary(collapsedData)"></div>
         </div>
-        <actions :widget="widgetLabel" :tertiary-buttons="tertiaryActionsButtons" />
-        <div
-          class="gl-float-right gl-align-self-center gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3"
-        >
+        <actions
+          :widget="$options.label || $options.name"
+          :tertiary-buttons="tertiaryActionsButtons"
+        />
+        <div class="gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6">
           <gl-button
             v-if="isCollapsible"
             v-gl-tooltip

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

@@ -47,7 +47,7 @@ export default {
       { 'mr-widget-extension-icon': !isLoading && size === 16 },
       { 'gl-p-2': isLoading || size === 16 },
     ]"
-    class="align-self-center gl-rounded-full gl-mr-3 gl-relative"
+    class="gl-rounded-full gl-mr-3 gl-relative gl-p-2"
   >
     <gl-loading-icon v-if="isLoading" size="md" inline class="gl-display-block" />
     <gl-icon

app/assets/javascripts/vue_merge_request_widget/extensions/issues.js

@@ -19,7 +19,7 @@ export default {
     // Small summary text to be displayed in the collapsed state
     // Receives the collapsed data as an argument
     summary(count) {
-      return 'Summary text';
+      return 'Summary text<br/>Second line';
     },
     // Status icon to be used next to the summary text
     // Receives the collapsed data as an argument