From 404557e8b409d9d7654e4377dc3cb407de74120b Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Tue, 3 Sep 2024 11:12:57 +0200
Subject: [PATCH] Add tooltip to display the sender name

---
 res/css/views/rooms/_PinnedEventTile.pcss      |  1 +
 src/components/views/rooms/PinnedEventTile.tsx | 14 ++++++--------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/res/css/views/rooms/_PinnedEventTile.pcss b/res/css/views/rooms/_PinnedEventTile.pcss
index 33af834ddb3..0c49dbe9b32 100644
--- a/res/css/views/rooms/_PinnedEventTile.pcss
+++ b/res/css/views/rooms/_PinnedEventTile.pcss
@@ -37,6 +37,7 @@ limitations under the License.
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;
+                font: var(--cpd-font-body-md-semibold);
             }
         }
 
diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx
index 5fb9c07f452..c77cffe7768 100644
--- a/src/components/views/rooms/PinnedEventTile.tsx
+++ b/src/components/views/rooms/PinnedEventTile.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 
 import React, { JSX, useCallback, useState } from "react";
 import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import { IconButton, Menu, MenuItem, Separator, Text } from "@vector-im/compound-web";
+import { IconButton, Menu, MenuItem, Separator, Tooltip } from "@vector-im/compound-web";
 import { Icon as ViewIcon } from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
 import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
 import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg";
@@ -86,13 +86,11 @@ export function PinnedEventTile({ event, room, permalinkCreator }: PinnedEventTi
             </div>
             <div className="mx_PinnedEventTile_wrapper">
                 <div className="mx_PinnedEventTile_top">
-                    <Text
-                        weight="semibold"
-                        className={classNames("mx_PinnedEventTile_sender", getUserNameColorClass(sender))}
-                        as="span"
-                    >
-                        {event.sender?.name || sender}
-                    </Text>
+                    <Tooltip label={event.sender?.name || sender}>
+                        <span className={classNames("mx_PinnedEventTile_sender", getUserNameColorClass(sender))}>
+                            {event.sender?.name || sender}
+                        </span>
+                    </Tooltip>
                     <PinMenu event={event} room={room} permalinkCreator={permalinkCreator} />
                 </div>
                 <MessageEvent