From 1e3320da1ee63308dd10f0c67ce3fea30746ffbb Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 4 Sep 2024 11:45:18 +0200
Subject: [PATCH] Pinned message list: prevent sender name to overflow pinned
 event tile (#12947)

* Prevent sender name to overflow pinned event tile

* Add tooltip to display the sender name
---
 res/css/views/rooms/_PinnedEventTile.pcss          |  3 +++
 src/components/views/rooms/PinnedEventTile.tsx     | 14 ++++++--------
 .../__snapshots__/PinnedMessagesCard-test.tsx.snap |  8 ++++----
 .../__snapshots__/PinnedEventTile-test.tsx.snap    |  4 ++--
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/res/css/views/rooms/_PinnedEventTile.pcss b/res/css/views/rooms/_PinnedEventTile.pcss
index b727a5ff5a..c415a4da41 100644
--- a/res/css/views/rooms/_PinnedEventTile.pcss
+++ b/res/css/views/rooms/_PinnedEventTile.pcss
@@ -26,6 +26,8 @@ limitations under the License.
         /* Remove avatar width and space between the avatar and the wrapper */
         /* We need it to make the location fit */
         width: calc(100% - var(--cpd-space-4x) - 32px);
+        /* Prevent a long sender name to overflow the tile */
+        overflow: hidden;
 
         .mx_PinnedEventTile_top {
             display: flex;
@@ -37,6 +39,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 5fb9c07f45..c77cffe776 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
diff --git a/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
index 394ebada2f..d656093572 100644
--- a/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
@@ -152,7 +152,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
+                class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
@@ -218,7 +218,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
+                class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
@@ -347,7 +347,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
+                class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
@@ -413,7 +413,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
+                class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
diff --git a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index bf8cafe2dc..5c44de4c4d 100644
--- a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
         class="mx_PinnedEventTile_top"
       >
         <span
-          class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color2"
+          class="mx_PinnedEventTile_sender mx_Username_color2"
         >
           @alice:server.org
         </span>
@@ -90,7 +90,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
         class="mx_PinnedEventTile_top"
       >
         <span
-          class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color2"
+          class="mx_PinnedEventTile_sender mx_Username_color2"
         >
           @alice:server.org
         </span>