From ab71547c4c3e4bbf298dc279e0b438d4b1516920 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 4 Dec 2020 20:36:08 +0000
Subject: [PATCH] Don't let call room names push out their containers

---
 res/css/views/voip/_CallView.scss      | 9 +++++++++
 src/components/views/voip/CallView.tsx | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index 898bcf62f4..31997f6734 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -234,10 +234,19 @@ limitations under the License.
     }
 }
 
+.mx_CallView_header_callInfo {
+    margin-right: 16px;
+}
+
 .mx_CallView_header_roomName {
     font-weight: bold;
     font-size: 12px;
     line-height: initial;
+    height: 15px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 116px;
 }
 
 .mx_CallView_header_callTypeSmall {
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index e235b81f3c..375b704dfb 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -537,7 +537,7 @@ export default class CallView extends React.Component<IProps, IState> {
                 <AccessibleButton onClick={this.onRoomAvatarClick}>
                     <RoomAvatar room={callRoom} height={32} width={32} />
                 </AccessibleButton>
-                <div>
+                <div className="mx_CallView_header_callInfo">
                     <div className="mx_CallView_header_roomName">{callRoom.name}</div>
                     <div className="mx_CallView_header_callTypeSmall">{callTypeText}</div>
                 </div>