From 8a879c7fca6530f5a03b0402a6af67c5e9f1e7a7 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Mon, 21 Jul 2025 17:28:54 +0530
Subject: [PATCH] Message preview should show tooltip with the full message on
 hover (#30265)

* Add title attribute for message preview

So that the full message is shown in a tooltip on hover.

* Fix test

* Update src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

Co-authored-by: Florian Duros <florianduros@element.io>

---------

Co-authored-by: Florian Duros <florianduros@element.io>
---
 .../rooms/RoomListPanel/RoomListItemView.tsx  |  6 +++-
 .../RoomListPanel/RoomListItemView-test.tsx   |  2 +-
 .../__snapshots__/RoomList-test.tsx.snap      | 30 -------------------
 .../RoomListItemView-test.tsx.snap            | 12 ++------
 4 files changed, 8 insertions(+), 42 deletions(-)

diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
index cabb034975..a0259d0a6a 100644
--- a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
@@ -94,7 +94,11 @@ export const RoomListItemView = memo(function RoomListItemView({
                         <div className="mx_RoomListItemView_roomName" title={vm.name}>
                             {vm.name}
                         </div>
-                        <div className="mx_RoomListItemView_messagePreview">{vm.messagePreview}</div>
+                        {vm.messagePreview && (
+                            <div className="mx_RoomListItemView_messagePreview" title={vm.messagePreview}>
+                                {vm.messagePreview}
+                            </div>
+                        )}
                     </div>
                     {showHoverMenu ? (
                         <RoomListItemMenuView
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
index 7e4af3467a..a97e5217ef 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
@@ -65,7 +65,7 @@ describe("<RoomListItemView />", () => {
     });
 
     test("should render a room item with a message preview", () => {
-        defaultValue.messagePreview = "The message looks list this";
+        defaultValue.messagePreview = "The message looks like this";
 
         const onClick = jest.fn();
         const { asFragment } = render(<RoomListItemView room={room} onClick={onClick} isSelected={false} />);
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
index acd5569702..f312fd6e41 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
@@ -69,9 +69,6 @@ exports[`<RoomList /> should render a room list 1`] = `
                   >
                     room0
                   </div>
-                  <div
-                    class="mx_RoomListItemView_messagePreview"
-                  />
                 </div>
               </div>
             </div>
@@ -123,9 +120,6 @@ exports[`<RoomList /> should render a room list 1`] = `
                   >
                     room1
                   </div>
-                  <div
-                    class="mx_RoomListItemView_messagePreview"
-                  />
                 </div>
               </div>
             </div>
@@ -177,9 +171,6 @@ exports[`<RoomList /> should render a room list 1`] = `
                   >
                     room2
                   </div>
-                  <div
-                    class="mx_RoomListItemView_messagePreview"
-                  />
                 </div>
               </div>
             </div>
@@ -231,9 +222,6 @@ exports[`<RoomList /> should render a room list 1`] = `
                   >
                     room3
                   </div>
-                  <div
-                    class="mx_RoomListItemView_messagePreview"
-                  />
                 </div>
               </div>
             </div>
@@ -285,9 +273,6 @@ exports[`<RoomList /> should render a room list 1`] = `
                   >
                     room4
                   </div>
-                  <div
-                    class="mx_RoomListItemView_messagePreview"
-                  />
                 </div>
               </div>
             </div>
@@ -339,9 +324,6 @@ exports[`<RoomList /> should render a room list 1`] = `
                   >
                     room5
                   </div>
-                  <div
-                    class="mx_RoomListItemView_messagePreview"
-                  />
                 </div>
               </div>
             </div>
@@ -393,9 +375,6 @@ exports[`<RoomList /> should render a room list 1`] = `
                   >
                     room6
                   </div>
-                  <div
-                    class="mx_RoomListItemView_messagePreview"
-                  />
                 </div>
               </div>
             </div>
@@ -447,9 +426,6 @@ exports[`<RoomList /> should render a room list 1`] = `
                   >
                     room7
                   </div>
-                  <div
-                    class="mx_RoomListItemView_messagePreview"
-                  />
                 </div>
               </div>
             </div>
@@ -501,9 +477,6 @@ exports[`<RoomList /> should render a room list 1`] = `
                   >
                     room8
                   </div>
-                  <div
-                    class="mx_RoomListItemView_messagePreview"
-                  />
                 </div>
               </div>
             </div>
@@ -555,9 +528,6 @@ exports[`<RoomList /> should render a room list 1`] = `
                   >
                     room9
                   </div>
-                  <div
-                    class="mx_RoomListItemView_messagePreview"
-                  />
                 </div>
               </div>
             </div>
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
index 4340cb4200..ddadd26105 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
@@ -45,9 +45,6 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
           >
             room1
           </div>
-          <div
-            class="mx_RoomListItemView_messagePreview"
-          />
         </div>
       </div>
     </div>
@@ -100,9 +97,6 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
           >
             room1
           </div>
-          <div
-            class="mx_RoomListItemView_messagePreview"
-          />
         </div>
         <div
           aria-hidden="true"
@@ -167,9 +161,6 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
           >
             room1
           </div>
-          <div
-            class="mx_RoomListItemView_messagePreview"
-          />
         </div>
       </div>
     </div>
@@ -224,8 +215,9 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
           </div>
           <div
             class="mx_RoomListItemView_messagePreview"
+            title="The message looks like this"
           >
-            The message looks list this
+            The message looks like this
           </div>
         </div>
       </div>