Merge branch 'jobs-list-fix-focus' into 'master'

Jobs list: Fix focus states

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/130915



Merged-by: Coung Ngo <cngo@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Paulina Sedlak-Jakubowska <psedlak-jakubowska@gitlab.com>
Approved-by: Coung Ngo <cngo@gitlab.com>
Reviewed-by: Coung Ngo <cngo@gitlab.com>
Reviewed-by: Paulina Sedlak-Jakubowska <psedlak-jakubowska@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

app/assets/javascripts/jobs/components/table/cells/job_cell.vue

@@ -71,7 +71,7 @@ export default {
 <template>
   <div>
-    <div class="gl-text-truncate gl-mb-2">
+    <div class="gl-text-truncate gl-p-3 gl-mt-n3 gl-mx-n3 gl-mb-n2">
       <gl-link
         v-if="canReadJob"
         class="gl-text-blue-600!"
@@ -96,7 +96,7 @@ export default {
       >
         <div
           v-if="jobRef"
-          class="gl-px-2 gl-rounded-base gl-bg-gray-50 gl-max-w-15 gl-text-truncate"
+          class="gl-p-2 gl-rounded-base gl-bg-gray-50 gl-max-w-15 gl-text-truncate"
         >
           <gl-icon
             v-if="createdByTag"
@@ -114,7 +114,7 @@ export default {
         </div>
         <span v-else>{{ __('none') }}</span>
-        <div class="gl-ml-2 gl-rounded-base gl-px-2 gl-bg-gray-50">
+        <div class="gl-ml-2 gl-p-2 gl-rounded-base gl-bg-gray-50">
           <gl-icon class="gl-mx-2" name="commit" :size="$options.iconSize" />
           <gl-link
             class="gl-font-sm gl-font-monospace gl-text-gray-700 gl-hover-text-gray-900"

app/assets/javascripts/jobs/components/table/cells/pipeline_cell.vue

@@ -36,12 +36,16 @@ export default {
 <template>
   <div>
-    <div class="gl-text-truncate">
-      <gl-link class="gl-text-gray-500!" :href="pipelinePath" data-testid="pipeline-id">
+    <div class="gl-p-3 gl-mt-n3">
+      <gl-link
+        class="gl-text-truncate gl-ml-n3 gl-text-gray-500!"
+        :href="pipelinePath"
+        data-testid="pipeline-id"
+      >
         {{ pipelineId }}
       </gl-link>
     </div>
-    <div class="gl-font-sm gl-text-secondary gl-mt-2">
+    <div class="gl-font-sm gl-text-secondary gl-mt-n2">
       <span>{{ __('created by') }}</span>
       <gl-link v-if="showAvatar" :href="userPath" data-testid="pipeline-user-link">
         <gl-avatar :src="pipelineUserAvatar" :size="16" />