Merge pull request #4064 from nextcloud/fix/3945/patch-caption-wrap-i…

…n-sidebar-tabs Fix styles for long tab names in `NcAppSidebarTabs`
nextcloud-libraries · May 9, 2023 · 6e22e62 · 6e22e62
2 parents 8d9ad47 + ef69b72
commit 6e22e62
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -52,7 +52,9 @@
 				role="tab"
 				type="radio"
 				@update:checked="setActive(tab.id)">
-				{{ tab.name }}
+				<span class="app-sidebar-tabs__tab-caption">
+					{{ tab.name }}
+				</span>
 				<template #icon>
 					<NcVNodes :vnodes="tab.renderIcon()" />
 				</template>
@@ -272,6 +274,15 @@ export default {
 		&.active {
 			color: var(--color-primary);
 		}
+
+		&-caption {
+			flex: 0 1 100%;
+			width: 100%;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			text-align: center;
+		}
 	}
 
 	&__content {