Better accommodate long room names in call toasts

matrix-org · Oct 14, 2022 · 93c28b1 · 93c28b1
1 parent 0b4c692
commit 93c28b1
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/res/css/views/toasts/_IncomingCallToast.pcss b/res/css/views/toasts/_IncomingCallToast.pcss
@@ -21,22 +21,27 @@ 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;
 
             .mx_IncomingCallToast_room {
                 display: inline-block;
 
-                font-weight: bold;
+                font-weight: 600;
                 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: '';