Merge branch '283895-fix-pipeline-mr-widget-alignment' into 'master'

Fix alignment issues for pipelines in the MR widget.

See merge request gitlab-org/gitlab!65351

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

@@ -14,27 +14,25 @@ export default {
 };
 </script>
 <template>
-  <table class="table m-0">
-    <thead class="thead-white text-nowrap">
-      <tr class="d-none d-sm-table-row">
-        <th class="w-0"></th>
-        <th>{{ __('Artifact') }}</th>
-        <th class="w-50"></th>
-        <th>{{ __('Job') }}</th>
-      </tr>
-    </thead>
+  <div class="gl-pl-7">
+    <table class="table m-0">
+      <thead class="thead-white text-nowrap">
+        <tr class="d-none d-sm-table-row">
+          <th>{{ __('Artifact') }}</th>
+          <th>{{ __('Job') }}</th>
+        </tr>
+      </thead>
 
-    <tbody>
-      <tr v-for="item in artifacts" :key="item.text">
-        <td class="w-0"></td>
-        <td>
-          <gl-link :href="item.url" target="_blank">{{ item.text }}</gl-link>
-        </td>
-        <td class="w-0"></td>
-        <td>
-          <gl-link :href="item.job_path">{{ item.job_name }}</gl-link>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+      <tbody>
+        <tr v-for="item in artifacts" :key="item.text">
+          <td>
+            <gl-link :href="item.url" target="_blank">{{ item.text }}</gl-link>
+          </td>
+          <td>
+            <gl-link :href="item.job_path">{{ item.job_name }}</gl-link>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>

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

@@ -58,7 +58,7 @@ export default {
 
       <template v-else>
         <button
-          class="btn-blank btn s32 square gl-mr-3"
+          class="btn-blank btn s32 square"
           type="button"
           :aria-label="ariaLabel"
           :disabled="isLoading"

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

@@ -171,7 +171,7 @@ export default {
     <template v-else-if="!hasPipeline">
       <gl-loading-icon size="md" />
       <p
-        class="gl-flex-grow-1 gl-display-flex gl-ml-5 gl-mb-0"
+        class="gl-flex-grow-1 gl-display-flex gl-ml-3 gl-mb-0"
         data-testid="monitoring-pipeline-message"
       >
         {{ $options.monitoringPipelineText }}
@@ -190,7 +190,7 @@ export default {
       </p>
     </template>
     <template v-else-if="hasPipeline">
-      <a :href="status.details_path" class="align-self-start gl-mr-3">
+      <a :href="status.details_path" class="gl-align-self-center gl-mr-3">
         <ci-icon :status="status" :size="24" />
       </a>
       <div class="ci-widget-container d-flex">