Fixes call tiles overflow (#8096)

* Responsive call tiles

Fixes https://github.com/vector-im/element-web/issues/20254

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Take e2e icon into consideration on Bubble message layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/views/messages/_CallEvent.scss

@@ -19,22 +19,24 @@ limitations under the License.
     width: 100%;
 
     .mx_CallEvent {
-        position: relative;
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
+        gap: $spacing-4 0;
 
+        position: relative;
+        margin: $spacing-4 0;
+        padding: $spacing-12 $spacing-24;
+        box-sizing: border-box;
         background-color: $dark-panel-bg-color;
         border-radius: 8px;
         width: 65%;
-        box-sizing: border-box;
+        height: fit-content;
-        height: 60px;
-        margin: 4px 0;
 
         .mx_CallEvent_iconButton {
             display: inline-flex;
-            margin-right: 8px;
 
             &::before {
                 content: '';
@@ -62,6 +64,13 @@ limitations under the License.
             .mx_CallEvent_content_button_answer span::before {
                 mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
             }
+
+            &.mx_CallEvent_rejected,
+            &.mx_CallEvent_noAnswer {
+                .mx_CallEvent_type_icon::before {
+                    mask-image: url('$(res)/img/voip/declined-voice.svg');
+                }
+            }
         }
 
         &.mx_CallEvent_video {
@@ -70,44 +79,49 @@ limitations under the License.
             .mx_CallEvent_content_button_answer span::before {
                 mask-image: url('$(res)/img/element-icons/call/video-call.svg');
             }
+
+            &.mx_CallEvent_rejected,
+            &.mx_CallEvent_noAnswer {
+                .mx_CallEvent_type_icon::before {
+                    mask-image: url('$(res)/img/voip/declined-video.svg');
+                }
+            }
         }
 
-        &.mx_CallEvent_voice.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
+        &.mx_CallEvent_missed {
+            &.mx_CallEvent_voice {
+                .mx_CallEvent_type_icon::before {
                     mask-image: url('$(res)/img/voip/missed-voice.svg');
                 }
+            }
 
-        &.mx_CallEvent_video.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
+            &.mx_CallEvent_video {
+                .mx_CallEvent_type_icon::before {
                     mask-image: url('$(res)/img/voip/missed-video.svg');
                 }
-
-        &.mx_CallEvent_voice.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
-        &.mx_CallEvent_voice.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
-            mask-image: url('$(res)/img/voip/declined-voice.svg');
             }
-
-        &.mx_CallEvent_video.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
-        &.mx_CallEvent_video.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
-            mask-image: url('$(res)/img/voip/declined-video.svg');
         }
 
         .mx_CallEvent_info {
             display: flex;
             flex-direction: row;
             align-items: center;
-            margin-left: 12px;
+            width: fit-content;
-            min-width: 0;
+            max-width: 100%;
 
             .mx_CallEvent_info_basic {
                 display: flex;
                 flex-direction: column;
+                gap: $spacing-4;
                 margin-left: 10px; // To match mx_CallEvent
+                margin-right: 10px;
                 min-width: 0;
 
                 .mx_CallEvent_sender {
                     font-weight: 600;
                     font-size: 1.5rem;
                     line-height: 1.8rem;
-                    margin-bottom: 3px;
+                    margin-bottom: $spacing-4;
 
                     overflow: hidden;
                     white-space: nowrap;
@@ -115,12 +129,12 @@ limitations under the License.
                 }
 
                 .mx_CallEvent_type {
+                    display: flex;
+                    align-items: center;
                     font-weight: 400;
                     color: $secondary-content;
                     font-size: 1.2rem;
                     line-height: $font-13px;
-                    display: flex;
-                    align-items: center;
 
                     .mx_CallEvent_type_icon {
                         height: 13px;
@@ -143,16 +157,17 @@ limitations under the License.
 
         .mx_CallEvent_content {
             display: flex;
-            flex-direction: row;
+            flex-wrap: wrap;
             align-items: center;
             color: $secondary-content;
-            margin-right: 16px;
+            gap: $spacing-12; // See mx_IncomingCallToast_buttons
-            gap: 12px; // See mx_IncomingCallToast_buttons
+            margin-inline-start: 42px; // avatar (32px) + mx_CallEvent_info_basic margin (10px)
-            min-width: max-content;
+            word-break: break-word;
+            max-width: fit-content;
 
             .mx_CallEvent_content_button {
                 @mixin CallButton;
-                padding: 0 12px;
+                padding: 0 $spacing-12;
 
                 span::before {
                     mask-size: 16px;
@@ -162,25 +177,23 @@ limitations under the License.
                 }
             }
 
-            .mx_CallEvent_content_button_reject span::before {
+            .mx_CallEvent_content_button_reject {
+                span::before {
                     mask-image: url('$(res)/img/element-icons/call/hangup.svg');
                 }
+            }
 
             .mx_CallEvent_content_tooltip {
                 margin-right: 5px;
             }
         }
 
-        .mx_MessageTimestamp {
-            margin-left: 16px;
-        }
-
         &.mx_CallEvent_narrow {
-            height: unset;
-            width: 290px;
             flex-direction: column;
             align-items: unset;
-            gap: 16px;
+            gap: $spacing-4 $spacing-16;
+            height: unset;
+            min-width: 290px;
 
             .mx_CallEvent_iconButton {
                 position: absolute;
@@ -194,18 +207,36 @@ limitations under the License.
 
             .mx_CallEvent_info {
                 align-items: unset;
-                margin-top: 12px;
-                margin-right: 12px;
-
-                .mx_CallEvent_sender {
-                    margin-bottom: 8px;
-                }
-            }
-
-            .mx_CallEvent_content {
-                margin-left: 54px; // mx_CallEvent margin (12px) + avatar (32px) + mx_CallEvent_info_basic margin (10px)
-                margin-bottom: 16px;
             }
         }
     }
 }
+
+.mx_EventTile[data-layout="bubble"] {
+    .mx_EventTile_e2eIcon + .mx_CallEvent_wrapper {
+        .mx_CallEvent {
+            position: relative;
+
+            // 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon)
+            right: calc(5px + 14px + 9px);
+        }
+    }
+}
+
+.mx_EventTile_leftAlignedBubble {
+    .mx_CallEvent_wrapper {
+        .mx_CallEvent {
+            &.mx_CallEvent_narrow {
+                gap: $spacing-8 $spacing-4;
+            }
+        }
+    }
+}
+
+.mx_IRCLayout {
+    .mx_CallEvent_wrapper {
+        .mx_CallEvent {
+            margin-inline-start: $spacing-4; // display green line
+        }
+    }
+}