From 1d03b8e478784c14b88d8b7404ce22d6134fe1f5 Mon Sep 17 00:00:00 2001
From: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
Date: Mon, 21 Aug 2023 15:24:22 -0400
Subject: [PATCH] Prevent long system contact names from wrapping in group call
 participant list

---
 stylesheets/_modules.scss                 | 7 ++++++-
 ts/components/CallingParticipantsList.tsx | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 8088e279233c..9ad658149aec 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -4103,10 +4103,15 @@ button.module-image__border-overlay:focus {
     margin-bottom: 16px;
   }
 
+  &__avatar-and-name {
+    display: flex;
+    align-items: center;
+    max-width: 172px;
+  }
+
   &__name {
     display: inline-block;
     margin-inline-start: 8px;
-    max-width: 130px;
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;
diff --git a/ts/components/CallingParticipantsList.tsx b/ts/components/CallingParticipantsList.tsx
index a575cb3ec9d9..eb2d77dd1925 100644
--- a/ts/components/CallingParticipantsList.tsx
+++ b/ts/components/CallingParticipantsList.tsx
@@ -107,7 +107,7 @@ export const CallingParticipantsList = React.memo(
                     //   participants who have joined on multiple devices.
                     key={index}
                   >
-                    <div>
+                    <div className="module-calling-participants-list__avatar-and-name">
                       <Avatar
                         acceptedMessageRequest={
                           participant.acceptedMessageRequest