Truncate commit message in pipeline log view header (#2356)

woodpecker-ci · Aug 30, 2023 · 91192a9 · 91192a9
1 parent f2a5e15
commit 91192a9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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">