From cd42d09ea9333e0b875736b7fdcc047c0b94534e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 7 Jul 2022 14:30:28 +0100
Subject: [PATCH] Fix facepile display issues

Fixes https://github.com/vector-im/element-call/issues/434 and a
separate bug where the facepile would just disappear off to the left
(because we kept increasing the size even though we capped the number
of circles at 8 plus the overflow one).
---
 src/Facepile.jsx                | 6 +++++-
 src/room/PTTCallView.module.css | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Facepile.jsx b/src/Facepile.jsx
index aace9b1d..e19e6425 100644
--- a/src/Facepile.jsx
+++ b/src/Facepile.jsx
@@ -24,7 +24,11 @@ export function Facepile({
     <div
       className={classNames(styles.facepile, styles[size], className)}
       title={participants.map((member) => member.name).join(", ")}
-      style={{ width: participants.length * (_size - _overlap) + _overlap }}
+      style={{
+        width:
+          Math.min(participants.length, max + 1) * (_size - _overlap) +
+          _overlap,
+      }}
       {...rest}
     >
       {participants.slice(0, max).map((member, i) => {
diff --git a/src/room/PTTCallView.module.css b/src/room/PTTCallView.module.css
index 76ef6998..f0538501 100644
--- a/src/room/PTTCallView.module.css
+++ b/src/room/PTTCallView.module.css
@@ -28,6 +28,7 @@
   display: flex;
   flex-direction: column;
   margin: 20px;
+  text-align: center;
 }
 
 .participants > p {