fix(ui): sidenav tooltip overlaps with title (#199)

nuxt · Apr 24, 2023 · aec5192 · aec5192
1 parent c0ffd46
commit aec5192
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/devtools/client/components/SideNavItem.vue b/packages/devtools/client/components/SideNavItem.vue
@@ -25,7 +25,7 @@ const isActive = computed(() => route.path.startsWith(tabPath.value))
     >
       <TabIcon
         text-xl
-        :icon="tab.icon" :title="tab.title"
+        :icon="tab.icon" :title="tab.title" :show-title="false"
       />
       <div
         v-if="badge" absolute bottom-0 right-0 h-4 w-4 rounded-full text-9px text-white flex="~ items-center justify-center"

diff --git a/packages/devtools/client/components/TabIcon.vue b/packages/devtools/client/components/TabIcon.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-defineProps<{
+withDefaults(defineProps<{
   icon?: string
   title?: string
-}>()
+  showTitle?: boolean
+}>(), {
+  showTitle: true,
+})
 </script>
 
 <template>
@@ -24,6 +27,6 @@ defineProps<{
     }"
     v-bind="$attrs"
     :class="icon || 'carbon-bring-forward'"
-    :title="title"
+    :title="showTitle ? title : undefined"
   />
 </template>