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

@@ -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) => {

src/room/PTTCallView.module.css

@@ -28,6 +28,7 @@
   display: flex;
   flex-direction: column;
   margin: 20px;
+  text-align: center;
 }
 
 .participants > p {