From 409a49b271c66a153f2197ee5a49e6759d0e299a Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Fri, 1 Dec 2023 12:26:31 +0530
Subject: [PATCH] fix : added tooltips for base names on toolbar and sidebar

---
 .../components/dashboard/TreeView/ProjectNode.vue     | 10 ++++++----
 packages/nc-gui/components/project/View.vue           | 11 +++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index d346d3a157..242805c734 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -424,15 +424,17 @@ function projectDelete() {
             @keyup.esc="updateProjectTitle"
             @blur="updateProjectTitle"
           />
-          <span
+          <NcTooltip
             v-else
             class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none"
             :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
             :class="{ 'text-black font-semibold': activeProjectId === base.id && baseViewOpen }"
-            @click="onProjectClick(base)"
           >
-            {{ base.title }}
-          </span>
+            <template #title>{{ base.title }}</template>
+            <span @click="onProjectClick(base)">
+              {{ base.title }}
+            </span>
+          </NcTooltip>
           <div :class="{ 'flex flex-grow h-full': !editMode }" @click="onProjectClick(base)"></div>
 
           <NcDropdown v-if="!isSharedBase" v-model:visible="isOptionsOpen" :trigger="['click']">
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 2f84304a2c..1df117de5b 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -68,16 +68,19 @@ watch(
 <template>
   <div class="h-full nc-base-view">
     <div
-      class="flex flex-row pl-2 pr-2 border-b-1 border-gray-200 justify-between w-full"
+      class="flex flex-row pl-2 pr-2 gap-1 border-b-1 border-gray-200 justify-between w-full"
       :class="{ 'nc-table-toolbar-mobile': isMobileMode, 'h-[var(--topbar-height)]': !isMobileMode }"
     >
       <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
         <div class="flex flex-row items-center h-full gap-x-2.5">
           <GeneralProjectIcon :type="openedProject?.type" />
-          <div class="flex font-medium text-sm capitalize">
-            {{ openedProject?.title }}
-          </div>
+          <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150">
+            <template #title> {{ openedProject?.title }}</template>
+            <span class="truncate">
+              {{ openedProject?.title }}
+            </span>
+          </NcTooltip>
         </div>
       </div>
       <LazyGeneralShareProject />