From 81533b905fb3b6f1796fed4f4b180ddc524fe78d Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 14 Oct 2022 14:50:50 -0400
Subject: [PATCH] Better accommodate long room names in call toasts (#9426)

* Better accommodate long room names in call toasts

* Use a font weight variable

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/toasts/_IncomingCallToast.pcss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/res/css/views/toasts/_IncomingCallToast.pcss b/res/css/views/toasts/_IncomingCallToast.pcss
index e66e1c31d4..f2d074f94b 100644
--- a/res/css/views/toasts/_IncomingCallToast.pcss
+++ b/res/css/views/toasts/_IncomingCallToast.pcss
@@ -21,11 +21,14 @@ limitations under the License.
     pointer-events: initial; /* restore pointer events so the user can accept/decline */
     width: 250px;
 
+    $closeButtonSize: 16px;
+
     .mx_IncomingCallToast_content {
         display: flex;
         flex-direction: column;
         margin-left: 8px;
         width: 100%;
+        overflow: hidden;
 
         .mx_IncomingCallToast_info {
             margin-bottom: $spacing-16;
@@ -33,10 +36,12 @@ limitations under the License.
             .mx_IncomingCallToast_room {
                 display: inline-block;
 
-                font-weight: bold;
+                font-weight: $font-semi-bold;
                 font-size: $font-15px;
                 line-height: $font-24px;
 
+                /* Prevent overlap with the close button */
+                width: calc(100% - $closeButtonSize - 2 * $spacing-4);
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
@@ -86,8 +91,8 @@ limitations under the License.
         right: $spacing-4;
 
         display: flex;
-        height: 16px;
-        width: 16px;
+        height: $closeButtonSize;
+        width: $closeButtonSize;
 
         &::before {
             content: '';