From 0fff778729463ebaa2f2255b9131e682eb964b9f Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 5 Sep 2022 22:37:52 +0300
Subject: [PATCH] fix: tab title truncation

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../[projectType]/[projectId]/index/index.vue  | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 783e664f07..b40b82aee6 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -48,10 +48,17 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
         <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit">
           <a-tab-pane v-for="(tab, i) of tabs" :key="i">
             <template #tab>
-              <div class="flex items-center gap-2">
-                <component :is="icon(tab)" class="text-sm" />
-
-                <GeneralTruncateText>{{ tab.title }}</GeneralTruncateText>
+              <div class="flex items-center gap-2 max-w-[110px]">
+                <div class="flex items-center">
+                  <component :is="icon(tab)" class="text-sm" />
+                </div>
+                <a-tooltip v-if="tab.title?.length > 12" placement="bottom">
+                  <div class="truncate">{{ tab.title }}</div>
+                  <template #title>
+                    <div>{{ tab.title }}</div>
+                  </template>
+                </a-tooltip>
+                <div v-else>{{ tab.title }}</div>
               </div>
             </template>
           </a-tab-pane>
@@ -126,4 +133,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
 :deep(.ant-menu-submenu::after) {
   @apply !border-none;
 }
+:deep(.ant-tabs-tab-remove) {
+  @apply mt-[3px];
+}
 </style>