2 files changed, 15 insertions, 7 deletions
diff --git a/app/assets/javascripts/jobs/components/job/manual_variables_form.vue b/app/assets/javascripts/jobs/components/job/manual_variables_form.vue
index d7bbd6daed2..734d3ca0d49 100644
--- a/app/assets/javascripts/jobs/components/job/manual_variables_form.vue
+++ b/app/assets/javascripts/jobs/components/job/manual_variables_form.vue
@@ -68,6 +68,7 @@ export default {
       required: true,
     },
   },
+  clearBtnSharedClasses: ['gl-flex-grow-0 gl-flex-basis-0'],
   inputTypes: {
     key: 'key',
     value: 'value',
@@ -229,16 +230,23 @@ export default {
           v-gl-tooltip
           :aria-label="$options.i18n.clearInputs"
           :title="$options.i18n.clearInputs"
-          class="gl-flex-grow-0 gl-flex-basis-0"
+          :class="$options.clearBtnSharedClasses"
           category="tertiary"
           variant="danger"
           icon="clear"
           data-testid="delete-variable-btn"
           @click="deleteVariable(variable.id)"
         />
-
-        <!-- delete variable button placeholder to not break flex layout  -->
-        <div v-else class="gl-w-7 gl-mr-3" data-testid="delete-variable-btn-placeholder"></div>
+        <!-- Placeholder button to keep the layout fixed -->
+        <gl-button
+          v-else
+          class="gl-opacity-0 gl-pointer-events-none"
+          :class="$options.clearBtnSharedClasses"
+          data-testid="delete-variable-btn-placeholder"
+          category="tertiary"
+          variant="danger"
+          icon="clear"
+        />
       </div>
 
       <div class="gl-text-center gl-mt-5">
diff --git a/app/assets/javascripts/jobs/components/table/jobs_table.vue b/app/assets/javascripts/jobs/components/table/jobs_table.vue
index d8c5c292f52..9ee4439b618 100644
--- a/app/assets/javascripts/jobs/components/table/jobs_table.vue
+++ b/app/assets/javascripts/jobs/components/table/jobs_table.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTable } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import ActionsCell from './cells/actions_cell.vue';
 import DurationCell from './cells/duration_cell.vue';
 import JobCell from './cells/job_cell.vue';
@@ -14,7 +14,7 @@ export default {
   },
   components: {
     ActionsCell,
-    CiBadge,
+    CiBadgeLink,
     DurationCell,
     GlTable,
     JobCell,
@@ -55,7 +55,7 @@ export default {
     </template>
 
     <template #cell(status)="{ item }">
-      <ci-badge :status="item.detailedStatus" />
+      <ci-badge-link :status="item.detailedStatus" />
     </template>
 
     <template #cell(job)="{ item }">