Fix versioning dropdown squashed display (directus#21109) (directus#2…

…3162) * Fix versioning dropdown squashed display (directus#21109) * Add changeset --------- Co-authored-by: Rijk van Zanten <[email protected]>
VincentKempers · Aug 4, 2024 · db7e0de · db7e0de
1 parent 3ef539d
commit db7e0de
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/green-pumas-perform.md b/.changeset/green-pumas-perform.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed an issue that would cause the versioning dropdown to be displayed squashed on long version names
diff --git a/app/src/modules/content/components/version-menu.vue b/app/src/modules/content/components/version-menu.vue
@@ -222,12 +222,12 @@ async function onPromoteComplete(deleteOnPromote: boolean) {
 </script>
 
 <template>
-	<div>
+	<div class="version-menu-wrapper">
 		<v-menu class="version-menu" placement="bottom-start" show-arrow>
 			<template #activator="{ toggle }">
 				<button class="version-button" :class="{ main: currentVersion === null }" @click="toggle">
 					<span class="version-name">
-						{{ currentVersion ? getVersionDisplayName(currentVersion) : t('main_version') }}
+						<v-text-overflow :text="currentVersion ? getVersionDisplayName(currentVersion) : t('main_version')" />
 					</span>
 					<v-icon name="arrow_drop_down" />
 				</button>
@@ -413,6 +413,10 @@ async function onPromoteComplete(deleteOnPromote: boolean) {
 	@include form-grid;
 }
 
+.version-menu-wrapper {
+	overflow: hidden;
+}
+
 .version-menu {
 	flex-shrink: 0;
 }
@@ -426,14 +430,16 @@ async function onPromoteComplete(deleteOnPromote: boolean) {
 
 .version-button {
 	display: flex;
-	margin-left: 16px;
+	align-items: center;
 	padding: 2px;
 	background-color: var(--theme--background-normal);
 	color: var(--theme--foreground);
 	border-radius: 24px;
+	width: 100%;
 
 	.version-name {
 		padding-left: 8px;
+		overflow: hidden;
 	}
 
 	&:hover {

diff --git a/app/src/views/private/components/header-bar.vue b/app/src/views/private/components/header-bar.vue
@@ -119,6 +119,7 @@ onUnmounted(() => {
 		position: relative;
 		display: flex;
 		align-items: center;
+		gap: 16px;
 		width: 100%;
 		max-width: calc(100% - 12px - 44px - 120px - 12px - 8px);
 		height: 100%;