fix(engine): 🐛 Avatar display on mobile

packages/bot-engine/src/components/avatars/Avatar.tsx

@@ -4,23 +4,19 @@ import { DefaultAvatar } from './DefaultAvatar'
 
 export const Avatar = ({ avatarSrc }: { avatarSrc?: string }): JSX.Element => {
   if (avatarSrc === '') return <></>
-  return (
+  if (isDefined(avatarSrc))
-    <div className="w-full h-full rounded-full text-2xl md:text-4xl text-center xs:w-10 xs:h-10 flex-shrink-0">
+    return (
-      {isDefined(avatarSrc) ? (
+      <figure
-        <figure
+        className={
-          className={
+          'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-10 xs:h-10 xs:text-xl'
-            'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-full xs:h-full xs:text-xl'
+        }
-          }
+      >
-        >
+        <img
-          <img
+          src={avatarSrc}
-            src={avatarSrc}
+          alt="Bot avatar"
-            alt="Bot avatar"
+          className="rounded-full object-cover w-full h-full"
-            className="rounded-full object-cover w-full h-full"
+        />
-          />
+      </figure>
-        </figure>
+    )
-      ) : (
+  return <DefaultAvatar />
-        <DefaultAvatar />
-      )}
-    </div>
-  )
 }

packages/bot-engine/src/components/avatars/DefaultAvatar.tsx

@@ -4,7 +4,7 @@ export const DefaultAvatar = (): JSX.Element => {
   return (
     <figure
       className={
-        'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-full xs:h-full xs:text-xl'
+        'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-10 xs:h-10 xs:text-xl'
       }
       data-testid="default-avatar"
     >