From 50de35cd1a8827be3bfc32efe92c195e7a6722fb Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Fri, 14 Jan 2022 11:37:30 +0100
Subject: [PATCH] truncate room name on pip header (#7538)

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 res/css/views/voip/_CallViewHeader.scss               | 5 +++++
 src/components/views/voip/CallView/CallViewHeader.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/res/css/views/voip/_CallViewHeader.scss b/res/css/views/voip/_CallViewHeader.scss
index 0575f4f535..94971b2a9b 100644
--- a/res/css/views/voip/_CallViewHeader.scss
+++ b/res/css/views/voip/_CallViewHeader.scss
@@ -75,6 +75,7 @@ limitations under the License.
 .mx_CallViewHeader_callInfo {
     margin-left: 12px;
     margin-right: 16px;
+    overflow: hidden;
 }
 
 .mx_CallViewHeader_roomName {
@@ -82,6 +83,10 @@ limitations under the License.
     font-size: 12px;
     line-height: initial;
     height: 15px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .mx_CallView_secondaryCall_roomName {
diff --git a/src/components/views/voip/CallView/CallViewHeader.tsx b/src/components/views/voip/CallView/CallViewHeader.tsx
index cebba8c5dd..7a76ca7b7b 100644
--- a/src/components/views/voip/CallView/CallViewHeader.tsx
+++ b/src/components/views/voip/CallView/CallViewHeader.tsx
@@ -111,7 +111,7 @@ const CallViewHeader: React.FC<CallViewHeaderProps> = ({
         >
             <RoomAvatar room={callRoom} height={32} width={32} />
             <div className="mx_CallViewHeader_callInfo">
-                <div className="mx_CallViewHeader_roomName">{ callRoomName }</div>
+                <div className="mx_CallViewHeader_roomName" title={callRoomName}>{ callRoomName }</div>
                 <div className="mx_CallViewHeader_callTypeSmall">
                     { callTypeText }
                     { onHoldCallRoom && <SecondaryCallInfo callRoom={onHoldCallRoom} /> }