fix(Conversation): make the text ellipsized again

Signed-off-by: Dorra Jaouad <[email protected]>

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -23,13 +23,6 @@
 		force-menu
 		:compact="compact"
 		@click="onClick">
-		<template #name>
-			<template v-if="compact && iconType">
-				<component :is="iconType.component" :size="15" :fill-color="iconType.color" />
-				<span class="hidden-visually">{{ iconType.text }}</span>
-			</template>
-			<span>{{ item.displayName }}</span>
-		</template>
 		<template #icon>
 			<ConversationIcon :item="item"
 				:hide-favorite="compact"
@@ -38,6 +31,13 @@
 				:show-user-online-status="compact"
 				:size="compact? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT" />
 		</template>
+		<template #name>
+			<template v-if="compact && iconType">
+				<component :is="iconType.component" :size="15" :fill-color="iconType.color" />
+				<span class="hidden-visually">{{ iconType.text }}</span>
+			</template>
+			<span class="text"> {{ item.displayName }} </span>
+		</template>
 		<template v-if="!compact" #subname>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<span v-html="conversationInformation" />
@@ -571,6 +571,12 @@ export default {
 	}
 }
 
+.text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 :deep(.dialog) {
 	padding-block: 0 8px;
 	padding-inline: 12px 8px;