Add a small mode for spotlight

src/reactions/RaisedHandIndicator.module.css

@@ -7,16 +7,24 @@
 }
 
 .raisedHandWidget > p {
-  padding: var(--cpd-space-2x);
+  padding: none;
   margin-top: auto;
   margin-bottom: auto;
   width: 4em;
 }
 
-.raisedHand {
+.raisedHandWidgetLarge > p {
+  padding: var(--cpd-space-2x);
+}
+
+.raisedHandLarge {
   margin: var(--cpd-space-2x);
   padding: var(--cpd-space-2x);
   padding-block: var(--cpd-space-2x);
+}
+
+.raisedHand {
+  margin: var(--cpd-space-1x);
   color: var(--cpd-color-icon-secondary);
   background-color: var(--cpd-color-icon-secondary);
   display: flex;
@@ -31,9 +39,15 @@
 }
 
 .raisedHand > span {
-  width: var(--cpd-space-8x);
+  width: var(--cpd-space-6x);
-  height: var(--cpd-space-8x);
+  height: var(--cpd-space-6x);
   display: inline-block;
   text-align: center;
+  font-size: 16px;
+}
+
+.raisedHandLarge > span {
+  width: var(--cpd-space-8x);
+  height: var(--cpd-space-8x);
   font-size: 22px;
 }

src/reactions/RaisedHandIndicator.tsx

@@ -8,11 +8,14 @@ Please see LICENSE in the repository root for full details.
 import { ReactNode, useEffect, useState } from "react";
 
 import styles from "./RaisedHandIndicator.module.css";
+import classNames from "classnames";
 
 export function RaisedHandIndicator({
   raisedHandTime,
+  minature,
 }: {
   raisedHandTime?: Date;
+  minature?: boolean;
 }): ReactNode {
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
@@ -37,8 +40,16 @@ export function RaisedHandIndicator({
 
   if (raisedHandTime) {
     return (
-      <div className={styles.raisedHandWidget}>
+      <div
-        <div className={styles.raisedHand}>
+        className={classNames(styles.raisedHandWidget, {
+          [styles.raisedHandWidgetLarge]: !minature,
+        })}
+      >
+        <div
+          className={classNames(styles.raisedHand, {
+            [styles.raisedHandLarge]: !minature,
+          })}
+        >
           <span role="img" aria-label="raised hand">
             ✋
           </span>

src/tile/MediaView.tsx

@@ -59,6 +59,8 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
   ) => {
     const { t } = useTranslation();
 
+    const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
+
     return (
       <animated.div
         className={classNames(styles.media, className, {
@@ -76,7 +78,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           <Avatar
             id={member?.userId ?? displayName}
             name={displayName}
-            size={Math.round(Math.min(targetWidth, targetHeight) / 2)}
+            size={avatarSize}
             src={member?.getMxcAvatarUrl()}
             className={styles.avatar}
           />
@@ -90,7 +92,10 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           )}
         </div>
         <div className={styles.fg}>
-          <RaisedHandIndicator raisedHandTime={raisedHandTime} />
+          <RaisedHandIndicator
+            raisedHandTime={raisedHandTime}
+            minature={avatarSize < 96}
+          />
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
             <Text as="span" size="sm" weight="medium" className={styles.name}>