Add pipeline triggerer column, adjust columns

Move pipeline triggerer avatar to its own column
Adjust the widths of other columns to accommodate new column
Add wrap class to commit column to prevent overlap

app/assets/javascripts/pipelines/components/pipeline_triggerer.vue

@@ -0,0 +1,33 @@
+<script>
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+
+export default {
+  components: {
+    UserAvatarLink,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    user() {
+      return this.pipeline.user;
+    },
+  },
+};
+</script>
+<template>
+  <div class="table-section section-10 d-none d-sm-none d-md-block pipeline-triggerer">
+    <user-avatar-link
+      v-if="user"
+      :link-href="user.path"
+      :img-src="user.avatar_url"
+      :img-size="26"
+      :tooltip-text="user.name"
+      class="prepend-left-default js-pipeline-url-user"
+    />
+    <span v-else class="prepend-left-default js-pipeline-url-api api"> API </span>
+  </div>
+</template>

app/assets/javascripts/pipelines/components/pipeline_url.vue

@@ -59,19 +59,10 @@ export default {
 };
 </script>
 <template>
-  <div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
+  <div class="table-section section-10 d-none d-sm-none d-md-block pipeline-tags">
     <gl-link :href="pipeline.path" class="js-pipeline-url-link">
       <span class="pipeline-id">#{{ pipeline.id }}</span>
     </gl-link>
-    <span>by</span>
-    <user-avatar-link
-      v-if="user"
-      :link-href="user.path"
-      :img-src="user.avatar_url"
-      :tooltip-text="user.name"
-      class="js-pipeline-url-user"
-    />
-    <span v-if="!user" class="js-pipeline-url-api api"> API </span>
     <div class="label-container">
       <span
         v-if="pipeline.flags.latest"

app/assets/javascripts/pipelines/components/pipelines_table.vue

@@ -1,4 +1,5 @@
 <script>
+import { GlTooltipDirective } from '@gitlab/ui';
 import PipelinesTableRowComponent from './pipelines_table_row.vue';
 import PipelineStopModal from './pipeline_stop_modal.vue';
 import eventHub from '../event_hub';
@@ -13,6 +14,9 @@ export default {
     PipelinesTableRowComponent,
     PipelineStopModal,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     pipelines: {
       type: Array,
@@ -62,16 +66,19 @@ export default {
 <template>
   <div class="ci-table">
     <div class="gl-responsive-table-row table-row-header" role="row">
-      <div class="table-section section-10 js-pipeline-status pipeline-status" role="rowheader">
+      <div class="table-section section-10 js-pipeline-status" role="rowheader">
         {{ s__('Pipeline|Status') }}
       </div>
-      <div class="table-section section-15 js-pipeline-info pipeline-info" role="rowheader">
+      <div class="table-section section-10 js-pipeline-info pipeline-info" role="rowheader">
         {{ s__('Pipeline|Pipeline') }}
       </div>
+      <div class="table-section section-10 js-triggerer-info triggerer-info" role="rowheader">
+        {{ s__('Pipeline|Triggerer') }}
+      </div>
       <div class="table-section section-20 js-pipeline-commit pipeline-commit" role="rowheader">
         {{ s__('Pipeline|Commit') }}
       </div>
-      <div class="table-section section-20 js-pipeline-stages pipeline-stages" role="rowheader">
+      <div class="table-section section-15 js-pipeline-stages pipeline-stages" role="rowheader">
         {{ s__('Pipeline|Stages') }}
       </div>
     </div>

app/assets/javascripts/pipelines/components/pipelines_table_row.vue

@@ -5,6 +5,7 @@ import PipelinesArtifactsComponent from './pipelines_artifacts.vue';
 import CiBadge from '../../vue_shared/components/ci_badge_link.vue';
 import PipelineStage from './stage.vue';
 import PipelineUrl from './pipeline_url.vue';
+import PipelineTriggerer from './pipeline_triggerer.vue';
 import PipelinesTimeago from './time_ago.vue';
 import CommitComponent from '../../vue_shared/components/commit.vue';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
@@ -23,6 +24,7 @@ export default {
     CommitComponent,
     PipelineStage,
     PipelineUrl,
+    PipelineTriggerer,
     CiBadge,
     PipelinesTimeago,
     LoadingButton,
@@ -264,8 +266,9 @@ export default {
     </div>
 
     <pipeline-url :pipeline="pipeline" :auto-devops-help-path="autoDevopsHelpPath" />
+    <pipeline-triggerer :pipeline="pipeline" />
 
-    <div class="table-section section-20">
+    <div class="table-section section-wrap section-20">
       <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Commit') }}</div>
       <div class="table-mobile-content">
         <commit-component
@@ -281,7 +284,7 @@ export default {
       </div>
     </div>
 
-    <div class="table-section section-wrap section-20 stage-cell">
+    <div class="table-section section-wrap section-15 stage-cell">
       <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Stages') }}</div>
       <div class="table-mobile-content">
         <template v-if="pipeline.details.stages.length > 0">

changelogs/unreleased/58105-pipeline-author-and-commit-author-too-close-together-in-pipeline-list.yml

@@ -0,0 +1,5 @@
+---
+title: Improve pipelines table spacing, add triggerer column
+merge_request: 26136
+author:
+type: changed

locale/gitlab.pot

@@ -6652,6 +6652,9 @@ msgstr ""
 msgid "Pipeline|Stop pipeline #%{pipelineId}?"
 msgstr ""
 
+msgid "Pipeline|Triggerer"
+msgstr ""
+
 msgid "Pipeline|Variables"
 msgstr ""