diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 84346aecd..11d9aa429 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -4,15 +4,15 @@
     :to="{ name: 'repo', params: { repoId: repo.id } }"
     class="flex flex-col border rounded-md bg-wp-background-100 overflow-hidden p-4 border-wp-background-400 dark:bg-wp-background-200 cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300"
   >
-    <div class="grid grid-cols-[auto,1fr] gap-y-1 items-center">
+    <div class="grid grid-cols-[auto,1fr] gap-y-4 items-center">
       <div class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</div>
       <div class="ml-auto">
         <Badge v-if="repo.visibility === RepoVisibility.Public" :label="$t('repo.visibility.public.public')" />
       </div>
 
-      <div class="col-span-2 text-wp-text-100 mt-4 flex w-full">
+      <div class="col-span-2 text-wp-text-100 flex w-full gap-x-4">
         <template v-if="lastPipeline">
-          <div class="flex gap-x-1 items-center">
+          <div class="flex flex-1 min-w-0 gap-x-1 items-center">
             <PipelineStatusIcon v-if="lastPipeline" :status="lastPipeline.status" />
             <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ shortMessage }}</span>
           </div>