UBERF-9453: Fixed the size of avatars in the Office (#7978)

packages/theme/styles/love.scss

@@ -88,6 +88,10 @@
   &.disabled .floorGrid-room__header > span { color: var(--theme-trans-color); }
 }
 
+// Fix Avatars
+.floorGrid-room .floorGrid-room__field .hulyAvatar-container.hulyAvatarSize-large,
+.floorGrid-room .floorGrid-room__field .hulyAvatar-container.hulyAvatarSize-large img { width: 100%; }
+
 .floorGrid-configureRoom {
   &__header {
     top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .75rem - 1px);

plugins/contact-resources/src/components/Avatar.svelte

@@ -57,6 +57,7 @@
   export let variant: 'circle' | 'roundedRect' | 'none' = 'roundedRect'
   export let borderColor: number | undefined = undefined
   export let showStatus: boolean = false
+  export let adaptiveName: boolean = false
 
   export function pulse (): void {
     avatarInst.pulse()
@@ -143,6 +144,7 @@
       {bColor}
       bind:element
       withStatus
+      {adaptiveName}
     />
     <div class="hulyAvatar-statusMarker {size}" class:online={isOnline} class:offline={!isOnline} />
   </div>
@@ -158,5 +160,6 @@
     {color}
     {bColor}
     bind:element
+    {adaptiveName}
   />
 {/if}

plugins/contact-resources/src/components/AvatarInstance.svelte

@@ -28,6 +28,7 @@
   export let bColor: string | undefined = undefined
   export let withStatus: boolean = false
   export let element: HTMLElement
+  export let adaptiveName: boolean = false
 
   export function pulse (): void {
     if (element === undefined) return
@@ -51,7 +52,7 @@
   $: hasImg = url != null && !imgError
 </script>
 
-{#if size === 'full' && !url && displayName && displayName !== ''}
+{#if (size === 'full' || adaptiveName) && !url && displayName && displayName !== ''}
   <div
     bind:this={element}
     class="hulyAvatar-container hulyAvatarSize-{size} {variant}"

plugins/love-resources/src/components/RoomPreview.svelte

@@ -141,6 +141,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="floorGrid-room"
   class:preview
@@ -183,9 +184,9 @@
         }}
       >
         {#if personInfo}
-          <Avatar name={person?.name ?? personInfo.name} {person} size={'full'} showStatus={false} />
+          <Avatar name={person?.name ?? personInfo.name} {person} size={'large'} showStatus={false} adaptiveName />
         {:else if hoveredRoomX === x && hoveredRoomY === y}
-          <Avatar name={meName} person={meAvatar} size={'full'} showStatus={false} />
+          <Avatar name={meName} person={meAvatar} size={'large'} showStatus={false} adaptiveName />
         {/if}
       </div>
     {/each}