From 16afb568fd2e2b6992a3b14b18d3abf514254ae0 Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Fri, 25 Oct 2024 11:37:40 +0100
Subject: [PATCH] Center align hand raise.

---
 src/tile/MediaView.module.css |  8 ++++++++
 src/tile/MediaView.tsx        | 13 ++-----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/tile/MediaView.module.css b/src/tile/MediaView.module.css
index 2d8aba40..4f809420 100644
--- a/src/tile/MediaView.module.css
+++ b/src/tile/MediaView.module.css
@@ -106,6 +106,14 @@ unconditionally select the container so we can use cqmin units */
   max-inline-size: 100%;
 }
 
+.raisedHand > span {
+  width: var(--cpd-space-8x);
+  height: var(--cpd-space-8x);
+  display: inline-block;
+  text-align: center;
+  font-size: 22px;
+}
+
 .nameTag {
   grid-area: nameTag;
   padding: var(--cpd-space-1x);
diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx
index c369625b..87039d99 100644
--- a/src/tile/MediaView.tsx
+++ b/src/tile/MediaView.tsx
@@ -90,18 +90,9 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
         <div className={styles.fg}>
           {raisedHand && (
             <div className={styles.raisedHand}>
-              <p
-                role="img"
-                aria-label="raised hand"
-                style={{
-                  width: "22px",
-                  height: "0px",
-                  display: "inline-block",
-                  fontSize: "22px",
-                }}
-              >
+              <span role="img" aria-label="raised hand">
                 ✋
-              </p>
+              </span>
             </div>
           )}
           <div className={styles.nameTag}>