Merge branch '331609-action-button-layout-improvement' into 'master'

Improve button layout for pipelines table

See merge request gitlab-org/gitlab!68074

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_operations.vue

@@ -87,22 +87,21 @@ export default {
         @click="handleRetryClick"
       />
 
-      <gl-button
-        v-if="pipeline.flags.cancelable"
-        v-gl-tooltip.hover
-        v-gl-modal-directive="'confirmation-modal'"
-        :aria-label="$options.i18n.cancelTitle"
-        :title="$options.i18n.cancelTitle"
-        :loading="isCancelling"
-        :disabled="isCancelling"
-        icon="close"
-        variant="danger"
-        category="primary"
-        class="js-pipelines-cancel-button"
-        @click="handleCancelClick"
-      />
-
       <pipeline-multi-actions :pipeline-id="pipeline.id" />
     </div>
+    <gl-button
+      v-if="pipeline.flags.cancelable"
+      v-gl-tooltip.hover
+      v-gl-modal-directive="'confirmation-modal'"
+      :aria-label="$options.i18n.cancelTitle"
+      :title="$options.i18n.cancelTitle"
+      :loading="isCancelling"
+      :disabled="isCancelling"
+      icon="cancel"
+      variant="danger"
+      category="primary"
+      class="js-pipelines-cancel-button gl-ml-1"
+      @click="handleCancelClick"
+    />
   </div>
 </template>

app/views/projects/ci/builds/_build.html.haml

@@ -105,7 +105,7 @@
         - if can?(current_user, :update_build, job)
           - if job.active?
             = link_to cancel_project_job_path(job.project, job, continue: { to: request.fullpath }), method: :post, title: _('Cancel'), class: 'gl-button btn btn-default btn-icon' do
-              = sprite_icon('close', css_class: 'gl-icon')
+              = sprite_icon('cancel', css_class: 'gl-icon')
           - elsif job.scheduled?
             .gl-button.btn.btn-default.btn-icon.disabled{ disabled: true }
               = sprite_icon('planning', css_class: 'gl-icon')