Always show audio mute icon in group calls

stylesheets/_modules.scss

@@ -4126,41 +4126,53 @@ button.module-image__border-overlay:focus {
       }
     }
 
-    &--title {
+    &__info {
       @include font-caption;
-      background: linear-gradient(
-        180deg,
-        transparent,
-        $color-black-alpha-60 100%
-      );
       bottom: 0;
       display: flex;
+      justify-content: space-between;
       padding: 6px;
       position: absolute;
       user-select: none;
       width: 100%;
       z-index: $z-index-above-base;
+
+      &__contact-name {
+        color: $color-white;
+        margin-right: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        visibility: hidden;
+        white-space: nowrap;
+      }
+
+      &--audio-muted::after {
+        $size: 14px;
+        @include color-svg(
+          '../images/icons/v2/mic-off-solid-28.svg',
+          $color-white
+        );
+        content: '';
+        height: $size;
+        min-width: $size;
+        right: 6px;
+        width: $size;
+        z-index: $z-index-base;
+      }
     }
 
-    &--contact-name {
-      color: $color-white;
-      margin-right: 20px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+    &:hover {
+      .module-ongoing-call__group-call-remote-participant__info {
+        background: linear-gradient(
+          180deg,
+          transparent,
+          $color-black-alpha-60 100%
+        );
 
-    &--audio-muted::after {
-      @include color-svg(
-        '../images/icons/v2/mic-off-solid-28.svg',
-        $color-white
-      );
-      content: '';
-      height: 14px;
-      position: absolute;
-      right: 6px;
-      width: 14px;
-      z-index: $z-index-base;
+        &__contact-name {
+          visibility: visible;
+        }
+      }
     }
   }
 

ts/components/GroupCallRemoteParticipant.tsx

@@ -80,7 +80,6 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
     const [isWide, setIsWide] = useState<boolean>(
       videoAspectRatio ? videoAspectRatio >= 1 : true
     );
-    const [hasHover, setHover] = useState(false);
     const [showBlockInfo, setShowBlockInfo] = useState(false);
 
     // We have some state (`hasReceivedVideoRecently`) and this ref. We can't have a
@@ -238,8 +237,6 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
       }
     }
 
-    const showHover = hasHover && !props.isInPip;
-
     return (
       <>
         {showBlockInfo && (
@@ -266,22 +263,20 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
         <div
           className="module-ongoing-call__group-call-remote-participant"
           ref={intersectionRef}
-          onMouseEnter={() => setHover(true)}
-          onMouseLeave={() => setHover(false)}
           style={containerStyles}
         >
-          {showHover && (
+          {!props.isInPip && (
             <div
               className={classNames(
-                'module-ongoing-call__group-call-remote-participant--title',
+                'module-ongoing-call__group-call-remote-participant__info',
                 {
-                  'module-ongoing-call__group-call-remote-participant--audio-muted':
+                  'module-ongoing-call__group-call-remote-participant__info--audio-muted':
                     !hasRemoteAudio,
                 }
               )}
             >
               <ContactName
-                module="module-ongoing-call__group-call-remote-participant--contact-name"
+                module="module-ongoing-call__group-call-remote-participant__info__contact-name"
                 title={title}
               />
             </div>