From 106bf71ff32e0ac01a4e5055306300a4297e0dd5 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Tue, 11 Feb 2025 04:15:33 +0300
Subject: [PATCH] UBERF-9453: Fixed the size of avatars in the Office (#7978)

---
 packages/theme/styles/love.scss                              | 4 ++++
 plugins/contact-resources/src/components/Avatar.svelte       | 3 +++
 .../contact-resources/src/components/AvatarInstance.svelte   | 3 ++-
 plugins/love-resources/src/components/RoomPreview.svelte     | 5 +++--
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/theme/styles/love.scss b/packages/theme/styles/love.scss
index 1fafbb1d48..8a251f76cc 100644
--- a/packages/theme/styles/love.scss
+++ b/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);
diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
index 6f37f31a51..c69841b1c6 100644
--- a/plugins/contact-resources/src/components/Avatar.svelte
+++ b/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}
diff --git a/plugins/contact-resources/src/components/AvatarInstance.svelte b/plugins/contact-resources/src/components/AvatarInstance.svelte
index 918f28abbe..64378eceab 100644
--- a/plugins/contact-resources/src/components/AvatarInstance.svelte
+++ b/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}"
diff --git a/plugins/love-resources/src/components/RoomPreview.svelte b/plugins/love-resources/src/components/RoomPreview.svelte
index 22450a8d9a..d9b6f575f5 100644
--- a/plugins/love-resources/src/components/RoomPreview.svelte
+++ b/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}