diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index 0b6b16da14..f046e0ca7a 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -4,7 +4,7 @@
     :class="{ 'md:px-4': fullWidth }"
   >
     <FluidContainer :full-width="fullWidth" class="!py-0">
-      <div class="flex w-full md:items-center flex-col py-3 gap-y-2 md:flex-row md:justify-between">
+      <div class="flex w-full md:items-center flex-col py-3 gap-2 md:gap-10 md:flex-row md:justify-between">
         <div
           class="flex items-center content-start"
           :class="{
@@ -31,7 +31,7 @@
         />
         <div
           v-if="$slots.titleActions"
-          class="flex items-center md:justify-end gap-x-2"
+          class="flex items-center md:justify-end gap-x-2 min-w-0"
           :class="{
             'md:flex-1': searchBoxPresent,
           }"
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index 884141c00f..cce95488e1 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -11,12 +11,12 @@
       <template #title>{{ repo.full_name }}</template>
 
       <template #titleActions>
-        <div class="flex md:items-center flex-col gap-x-2 md:flex-row md:justify-between">
-          <div class="flex content-start gap-x-2 py-2 md:mr-2">
+        <div class="flex md:items-center flex-col gap-x-2 md:flex-row md:justify-between min-w-0">
+          <div class="flex content-start gap-x-2 py-2 md:mr-2 min-w-0">
             <PipelineStatusIcon :status="pipeline.status" class="flex flex-shrink-0" />
             <span class="flex-shrink-0 text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
             <span class="hidden md:inline-block">-</span>
-            <span class="text-center truncate">{{ message }}</span>
+            <span class="min-w-0 whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
           </div>
 
           <template v-if="repoPermissions.push">