Improve group call participants background, padding, margin

stylesheets/_modules.scss

@@ -3818,6 +3818,7 @@ button.module-image__border-overlay:focus {
     &__overflow {
       flex: 0 0 auto;
       position: relative;
+      margin-block-start: calc(60px + var(--title-bar-drag-area-height));
       margin-inline-end: 16px;
 
       &__inner {
@@ -3838,6 +3839,11 @@ button.module-image__border-overlay:focus {
       & .module-ongoing-call__group-call-remote-participant {
         width: 100%;
         margin-bottom: 1rem;
+
+        &__footer {
+          padding-block: 0 10px;
+          padding-inline: 10px;
+        }
       }
 
       &__scroll-marker {
@@ -3892,7 +3898,7 @@ button.module-image__border-overlay:focus {
           );
 
           #{$scroll-marker-selector}__button {
-            margin-block-start: 60px;
+            margin-block-start: 16px;
             transform: rotate(180deg);
           }
         }
@@ -3947,6 +3953,8 @@ button.module-image__border-overlay:focus {
   }
 
   &__group-call-remote-participant {
+    container-type: size;
+
     display: flex;
     justify-content: center;
     position: relative;
@@ -3961,6 +3969,16 @@ button.module-image__border-overlay:focus {
       transition: none;
     }
 
+    $group-call-remote-participant-footer-padding-medium: 12px;
+    $group-call-remote-participant-footer-padding-large: 16px;
+
+    @container (min-width: 180px) or (min-height: 180px) {
+      .module-ongoing-call__group-call-remote-participant__footer {
+        padding-block: 0 $group-call-remote-participant-footer-padding-large;
+        padding-inline: $group-call-remote-participant-footer-padding-large;
+      }
+    }
+
     &:after {
       content: '';
       position: absolute;
@@ -3992,6 +4010,10 @@ button.module-image__border-overlay:focus {
       }
     }
 
+    &-background.module-calling__background--no-avatar {
+      background-color: $color-gray-78;
+    }
+
     &__blocked {
       @include color-svg('../images/icons/v3/block/block.svg', $color-white);
       height: 24px;
@@ -4022,8 +4044,8 @@ button.module-image__border-overlay:focus {
       position: absolute;
       bottom: 0;
       height: 60px;
-      padding-block: 0 16px;
+      padding-block: 0 $group-call-remote-participant-footer-padding-medium;
-      padding-inline: 16px;
+      padding-inline: $group-call-remote-participant-footer-padding-medium;
       user-select: none;
       width: 100%;
       z-index: $z-index-above-base;
@@ -4216,6 +4238,10 @@ button.module-image__border-overlay:focus {
         -webkit-user-drag: none;
         -webkit-user-select: none;
       }
+
+      .module-calling__background--no-avatar {
+        background: transparent;
+      }
     }
 
     &--local {

ts/components/CallBackgroundBlur.tsx

@@ -3,28 +3,23 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import type { AvatarColorType } from '../types/Colors';
 
 export type PropsType = {
   avatarPath?: string;
   children?: React.ReactNode;
   className?: string;
-  color?: AvatarColorType;
 };
 
 export function CallBackgroundBlur({
   avatarPath,
   children,
   className,
-  color,
 }: PropsType): JSX.Element {
   return (
     <div
       className={classNames(
         'module-calling__background',
-        {
+        !avatarPath && 'module-calling__background--no-avatar',
-          [`module-background-color__${color || 'default'}`]: !avatarPath,
-        },
         className
       )}
     >

ts/components/CallScreen.tsx

@@ -391,7 +391,7 @@ export function CallScreen({
         {isSendingVideo ? (
           <video ref={localVideoRef} autoPlay />
         ) : (
-          <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
+          <CallBackgroundBlur avatarPath={me.avatarPath}>
             <div className="module-calling__spacer module-calling__camera-is-off-spacer" />
             <div className="module-calling__camera-is-off">
               {i18n('icu:calling__your-video-is-off')}
@@ -412,7 +412,7 @@ export function CallScreen({
         autoPlay
       />
     ) : (
-      <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
+      <CallBackgroundBlur avatarPath={me.avatarPath}>
         <Avatar
           acceptedMessageRequest
           avatarPath={me.avatarPath}

ts/components/CallingLobby.tsx

@@ -240,7 +240,6 @@ export function CallingLobby({
           <CallBackgroundBlur
             className="module-CallingLobby__local-preview module-CallingLobby__local-preview--camera-is-off"
             avatarPath={me.avatarPath}
-            color={me.color}
           />
         )}
 

ts/components/CallingPipRemoteVideo.tsx

@@ -48,7 +48,7 @@ function NoVideo({
 
   return (
     <div className="module-calling-pip__video--remote">
-      <CallBackgroundBlur avatarPath={avatarPath} color={color}>
+      <CallBackgroundBlur avatarPath={avatarPath}>
         <div className="module-calling-pip__video--avatar">
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}

ts/components/DirectCallRemoteParticipant.tsx

@@ -73,7 +73,7 @@ function renderAvatar(
 ): JSX.Element {
   return (
     <div className="module-ongoing-call__remote-video-disabled">
-      <CallBackgroundBlur avatarPath={avatarPath} color={color}>
+      <CallBackgroundBlur avatarPath={avatarPath}>
         <Avatar
           acceptedMessageRequest={acceptedMessageRequest}
           avatarPath={avatarPath}

ts/components/GroupCallRemoteParticipant.tsx

@@ -250,7 +250,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
       const shorterDimension = Math.min(width, height);
 
       if (shorterDimension >= 180) {
-        avatarSize = AvatarSize.EIGHTY;
+        avatarSize = AvatarSize.NINETY_SIX;
       } else {
         avatarSize = AvatarSize.FORTY_EIGHT;
       }
@@ -373,7 +373,10 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
             />
           )}
           {!hasVideoToShow && (
-            <CallBackgroundBlur avatarPath={avatarPath} color={color}>
+            <CallBackgroundBlur
+              avatarPath={avatarPath}
+              className="module-ongoing-call__group-call-remote-participant-background"
+            >
               {isBlocked ? (
                 <>
                   <i className="module-ongoing-call__group-call-remote-participant__blocked" />