From c437d32691f7bff4cfa84709dd29b43641f7834f Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 7 Jan 2025 15:14:09 -0500
Subject: [PATCH] Truncate sidebar title first to avoid tool buttons wrap
 (#2192)

---
 src/components/sidebar/tabs/SidebarTabTemplate.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 4a11563fd..99cb74214 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -4,11 +4,11 @@
     :class="props.class"
   >
     <div class="comfy-vue-side-bar-header">
-      <Toolbar
-        class="flex-shrink-0 border-x-0 border-t-0 rounded-none px-2 py-1 min-h-8"
-      >
+      <Toolbar class="border-x-0 border-t-0 rounded-none px-2 py-1 min-h-8">
         <template #start>
-          <span class="text-sm">{{ props.title.toUpperCase() }}</span>
+          <span class="text-xs 2xl:text-sm truncate" :title="props.title">
+            {{ props.title.toUpperCase() }}
+          </span>
         </template>
         <template #end>
           <slot name="tool-buttons"></slot>
@@ -37,4 +37,8 @@ const props = defineProps<{
 :deep(.p-toolbar-end) .p-button {
   @apply py-1 2xl:py-2;
 }
+
+:deep(.p-toolbar-start) {
+  @apply min-w-0 flex-1 overflow-hidden;
+}
 </style>