diff --git a/web/src/components/build-feed/BuildFeedItem.vue b/web/src/components/build-feed/BuildFeedItem.vue
index 1e7978b72f..972dba391b 100644
--- a/web/src/components/build-feed/BuildFeedItem.vue
+++ b/web/src/components/build-feed/BuildFeedItem.vue
@@ -1,9 +1,9 @@
 <template>
-  <div v-if="build" class="flex text-gray-600 dark:text-gray-500">
+  <div v-if="build" class="flex text-gray-600 dark:text-gray-500 w-full">
     <BuildStatusIcon :build="build" class="flex items-center" />
-    <div class="flex flex-col ml-4">
+    <div class="flex flex-col ml-4 min-w-0">
       <span class="underline">{{ build.owner }} / {{ build.name }}</span>
-      <span>{{ message }}</span>
+      <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
       <div class="flex flex-col mt-2">
         <div class="flex space-x-2 items-center">
           <Icon name="duration" />
diff --git a/web/src/components/repo/build/BuildItem.vue b/web/src/components/repo/build/BuildItem.vue
index 5bb904c36e..28ecb2ee8c 100644
--- a/web/src/components/repo/build/BuildItem.vue
+++ b/web/src/components/repo/build/BuildItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <ListItem v-if="build" clickable class="p-0">
+  <ListItem v-if="build" clickable class="p-0 w-full">
     <div class="flex items-center mr-4">
       <div
         class="min-h-full w-3"
@@ -17,14 +17,16 @@
       </div>
     </div>
 
-    <div class="flex w-full py-2 px-4">
-      <div class="flex items-center"><img class="w-8" :src="build.author_avatar" /></div>
+    <div class="flex py-2 px-4 flex-grow min-w-0">
+      <div class="flex items-center flex-shrink-0"><img class="w-8" :src="build.author_avatar" /></div>
 
-      <div class="ml-4 flex items-center mx-4">
-        <span class="text-gray-600 dark:text-gray-500">{{ message }}</span>
+      <div class="ml-4 flex items-center mx-4 min-w-0">
+        <span class="text-gray-600 dark:text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis">{{
+          message
+        }}</span>
       </div>
 
-      <div class="flex ml-auto text-gray-500 py-2">
+      <div class="flex ml-auto text-gray-500 py-2 flex-shrink-0">
         <div class="flex flex-col space-y-2 w-42">
           <div class="flex space-x-2 items-center">
             <Icon v-if="build.event === 'pull_request'" name="pull_request" />
diff --git a/web/src/views/repo/RepoBuild.vue b/web/src/views/repo/RepoBuild.vue
index c776ec5e18..298f98c7d3 100644
--- a/web/src/views/repo/RepoBuild.vue
+++ b/web/src/views/repo/RepoBuild.vue
@@ -1,20 +1,22 @@
 <template>
   <template v-if="build && repo">
-    <FluidContainer class="flex border-b mb-4 items-center dark:border-gray-600">
-      <IconButton icon="back" @click="$router.back()" />
-      <h1 class="text-xl ml-2 text-gray-500">Pipeline #{{ buildId }} - {{ message }}</h1>
-      <BuildStatusIcon :build="build" class="flex ml-auto" />
+    <FluidContainer class="flex border-b mb-4 items-center dark:border-gray-600 min-w-0">
+      <IconButton icon="back" class="flex-shrink-0" @click="$router.back()" />
+      <h1 class="text-xl ml-2 text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis">
+        Pipeline #{{ buildId }} - {{ message }}
+      </h1>
+      <BuildStatusIcon :build="build" class="flex flex-shrink-0 ml-auto" />
       <template v-if="repoPermissions.push">
         <Button
           v-if="build.status === 'pending' || build.status === 'running'"
-          class="ml-4"
+          class="ml-4 flex-shrink-0"
           text="Cancel"
           :is-loading="isCancelingBuild"
           @click="cancelBuild"
         />
         <Button
           v-else-if="build.status !== 'blocked' && build.status !== 'declined'"
-          class="ml-4"
+          class="ml-4 flex-shrink-0"
           text="Restart"
           :is-loading="isRestartingBuild"
           @click="restartBuild"