truncate room name on pip header (#7538)

Signed-off-by: Kerry Archibald <kerrya@element.io>
matrix-org · Jan 14, 2022 · 50de35c · 50de35c
1 parent 47c112b
commit 50de35c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/res/css/views/voip/_CallViewHeader.scss b/res/css/views/voip/_CallViewHeader.scss
@@ -75,13 +75,18 @@ limitations under the License.
 .mx_CallViewHeader_callInfo {
     margin-left: 12px;
     margin-right: 16px;
+    overflow: hidden;
 }
 
 .mx_CallViewHeader_roomName {
     font-weight: bold;
     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
@@ -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} /> }