From ddbb4319539e9e306ed9fc6f4f2145f20f13683a Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 12 Oct 2023 14:37:38 +0200
Subject: [PATCH] fix(Tabs): truncate buttons content

Resolves #796
---
 src/runtime/components/navigation/Tabs.vue | 2 +-
 src/runtime/ui.config.ts                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/navigation/Tabs.vue b/src/runtime/components/navigation/Tabs.vue
index abe766c73..7da7d3a1f 100644
--- a/src/runtime/components/navigation/Tabs.vue
+++ b/src/runtime/components/navigation/Tabs.vue
@@ -26,7 +26,7 @@
       >
         <button :class="[ui.list.tab.base, ui.list.tab.background, ui.list.tab.height, ui.list.tab.padding, ui.list.tab.size, ui.list.tab.font, ui.list.tab.rounded, ui.list.tab.shadow, selected ? ui.list.tab.active : ui.list.tab.inactive]">
           <slot :item="item" :index="index" :selected="selected" :disabled="disabled">
-            {{ item.label }}
+            <span class="truncate">{{ item.label }}</span>
           </slot>
         </button>
       </HTab>
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index bc7cd2df8..f633061b5 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -894,7 +894,7 @@ export const tabs = {
       shadow: 'shadow-sm'
     },
     tab: {
-      base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full whitespace-nowrap ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out',
+      base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out',
       background: '',
       active: 'text-gray-900 dark:text-white',
       inactive: 'text-gray-500 dark:text-gray-400',