From 6c4004a110c56bb319a7469f3262fcbe7ef1d3e2 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 17 Sep 2024 18:17:55 +0200
Subject: [PATCH 1/2] fix(TopBar): migrate to NcPopover

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/TopBar/TopBar.vue | 38 +++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index ae4cfc9bf30..b6ae1bd8ae8 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -34,18 +34,22 @@
 						:class="{'description__in-chat' : !isInCall }">
 						{{ statusMessage }}
 					</p>
-					<template v-if="conversation.description">
-						<p v-tooltip.bottom="{
-								content: renderedDescription,
-								delay: { show: 500, hide: 500 },
-								autoHide: false,
-								html: true,
-							}"
-							class="description"
-							:class="{'description__in-chat' : !isInCall }">
-							{{ conversation.description }}
-						</p>
-					</template>
+					<NcPopover v-if="conversation.description"
+						:focus-trap="false"
+						:delay="500"
+						:boundary="boundaryElement"
+						:popper-triggers="['hover']"
+						:triggers="['hover']">
+						<template #trigger="{ attrs }">
+							<p v-bind="attrs"
+								class="description"
+								:class="{'description__in-chat' : !isInCall }">
+								{{ conversation.description }}
+							</p>
+						</template>
+						<!-- eslint-disable-next-line vue/no-v-html -->
+						<div class="description__popover" v-html="renderedDescription" />
+					</NcPopover>
 				</div>
 			</a>
 
@@ -123,6 +127,7 @@ import { t, n } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import richEditor from '@nextcloud/vue/dist/Mixins/richEditor.js'
@@ -138,7 +143,6 @@ import ConversationIcon from '../ConversationIcon.vue'
 
 import { useGetParticipants } from '../../composables/useGetParticipants.js'
 import { AVATAR, CONVERSATION } from '../../constants.js'
-import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { useChatExtrasStore } from '../../stores/chatExtras.js'
 import { useSidebarStore } from '../../stores/sidebar.js'
@@ -160,6 +164,7 @@ export default {
 		ConversationIcon,
 		TopBarMediaControls,
 		NcButton,
+		NcPopover,
 		TopBarMenu,
 		TasksCounter,
 		ReactionMenu,
@@ -202,6 +207,7 @@ export default {
 	data: () => {
 		return {
 			showBreakoutRoomsEditor: false,
+			boundaryElement: document.querySelector('.main-view'),
 		}
 	},
 
@@ -438,6 +444,12 @@ export default {
 	}
 }
 
+.description__popover {
+	padding: var(--default-grid-baseline);
+	width: fit-content;
+	max-width: 50em;
+}
+
 .icon {
 	display: flex;
 }

From 7094a2c454270b9b366aba494a6033379b4d88fe Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 17 Sep 2024 18:25:23 +0200
Subject: [PATCH 2/2] fix(TopBar): reduce the font weight

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/TopBar/TopBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index b6ae1bd8ae8..e504ff2cf71 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -430,7 +430,7 @@ export default {
 		}
 	}
 	.title {
-		font-weight: bold;
+		font-weight: 500;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}