Transpose border to GridTile.

src/tile/GridTile.module.css

@@ -21,6 +21,15 @@ borders don't support gradients */
   transition: opacity ease 0.15s;
   inset: calc(-1 * var(--cpd-border-width-4));
   border-radius: var(--cpd-space-5x);
+  background-blend-mode: overlay, normal;
+}
+
+.tile.speaking {
+  /* !important because speaking border should take priority over hover */
+  outline: var(--cpd-border-width-1) solid var(--cpd-color-bg-canvas-default) !important;
+}
+
+.tile.speaking::before {
   background: linear-gradient(
       119deg,
       rgba(13, 92, 189, 0.7) 0%,
@@ -31,15 +40,25 @@ borders don't support gradients */
       rgba(13, 92, 189, 0.9) 0%,
       rgba(13, 189, 168, 0.9) 100%
     );
-  background-blend-mode: overlay, normal;
+  opacity: 1;
 }
 
-.tile.speaking {
+.tile.handRaised {
-  /* !important because speaking border should take priority over hover */
+  /* !important because hand raised border should take priority over hover */
-  outline: var(--cpd-border-width-1) solid var(--cpd-color-bg-canvas-default) !important;
+  outline: var(--cpd-border-width-2) solid var(--cpd-color-bg-canvas-default) !important;
 }
 
-.tile.speaking::before {
+.tile.handRaised::before {
+  background: linear-gradient(
+      119deg,
+      var(--cpd-color-yellow-1200) 0%,
+      var(--cpd-color-yellow-900) 100%
+    ),
+    linear-gradient(
+      180deg,
+      var(--cpd-color-yellow-1200) 0%,
+      var(--cpd-color-yellow-900) 100%
+    );
   opacity: 1;
 }
 

src/tile/GridTile.tsx

@@ -109,6 +109,10 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       </>
     );
 
+    const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""];
+
+    const showSpeaking = showSpeakingIndicators && speaking;
+
     const tile = (
       <MediaView
         ref={ref}
@@ -118,7 +122,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
         videoEnabled={videoEnabled && showVideo}
         videoFit={cropVideo ? "cover" : "contain"}
         className={classNames(className, styles.tile, {
-          [styles.speaking]: showSpeakingIndicators && speaking,
+          [styles.speaking]: showSpeaking,
+          [styles.handRaised]: !showSpeaking && !!handRaised,
         })}
         nameTagLeadingIcon={
           <MicIcon
@@ -146,7 +151,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
             {menu}
           </Menu>
         }
-        raisedHandTime={raisedHands[vm.member?.userId ?? ""]}
+        raisedHandTime={handRaised}
         {...props}
       />
     );

src/tile/MediaView.module.css

@@ -90,15 +90,6 @@ unconditionally select the container so we can use cqmin units */
   place-items: start;
 }
 
-.raisedHandBorder {
-  border: var(--cpd-space-1x) solid var(--cpd-color-yellow-1200);
-}
-
-/* Offset by the size of the border to prevent resizing */
-.media:not(.raisedHandBorder) {
-  margin: var(--cpd-space-1x);
-}
-
 .nameTag {
   grid-area: nameTag;
   padding: var(--cpd-space-1x);

src/tile/MediaView.tsx

@@ -68,7 +68,6 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
         className={classNames(styles.media, className, {
           [styles.mirror]: mirror,
           [styles.videoMuted]: !videoEnabled,
-          [styles.raisedHandBorder]: !!raisedHandTime,
         })}
         style={style}
         ref={ref}