Merge branch...

Merge branch '42677-cancel-automatic-merge-button-gets-a-bigger-height-than-it-should-when-content-overflows' into 'master'

Resolve "Cancel automatic merge button gets a bigger height than it should when content overflows"

Closes #42677

See merge request gitlab-org/gitlab-ce!20193

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue

@@ -32,7 +32,7 @@
   };
 </script>
 <template>
-  <div class="space-children flex-container-block append-right-10">
+  <div class="space-children d-flex append-right-10">
     <div
       v-if="isLoading"
       class="mr-widget-icon"

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue

@@ -82,7 +82,7 @@
   <div class="mr-widget-body media">
     <status-icon status="success" />
     <div class="media-body">
-      <h4 class="flex-container-block">
+      <h4 class="d-flex align-items-start">
         <span class="append-right-10">
           {{ s__("mrWidget|Set by") }}
           <mr-widget-author :author="mr.setToMWPSBy" />
@@ -119,7 +119,7 @@
         </p>
         <p
           v-else
-          class="flex-container-block"
+          class="d-flex align-items-start"
         >
           <span class="append-right-10">
             {{ s__("mrWidget|The source branch will not be removed") }}

app/assets/stylesheets/framework/blocks.scss

@@ -350,11 +350,6 @@
   }
 }
 
-.flex-container-block {
-  display: -webkit-flex;
-  display: flex;
-}
-
 .flex-right {
   margin-left: auto;
 }