🆙 Fix BOTS in catalog and inventory

src/common/layout/LayoutAvatarImageView.tsx

@@ -12,35 +12,51 @@ export interface LayoutAvatarImageViewProps extends BaseProps<HTMLDivElement>
     headOnly?: boolean;
     direction?: number;
     scale?: number;
+    fit?: boolean;
 }
 
 export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
 {
-    const { figure = '', gender = '', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props;
+    const { figure = '', gender = '', headOnly = false, direction = 0, scale = 1, fit = false, classNames = [], style = {}, ...rest } = props;
     const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
     const [ isReady, setIsReady ] = useState<boolean>(false);
     const isDisposed = useRef(false);
-    // Request id bumped on every prop change. The SDK can call
-    // resetFigure asynchronously when server-side figure data lands;
-    // if props change in quick succession the older callback could
-    // otherwise overwrite the newer image. The closure captures the
-    // id and bails when stale.
     const requestIdRef = useRef(0);
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'avatar-image relative w-[90px] h-[130px] bg-no-repeat left-[-2px] pointer-events-none' ];
+        let newClassNames: string[];
+
+        if(fit)
+        {
+            newClassNames = [ 'avatar-image absolute inset-0 pointer-events-none' ];
+        }
+        else if(headOnly)
+        {
+            newClassNames = [ 'avatar-image absolute inset-0 bg-no-repeat pointer-events-none' ];
+        }
+        else
+        {
+            newClassNames = [ 'avatar-image relative w-[90px] h-[130px] bg-no-repeat left-[-2px] pointer-events-none' ];
+        }
 
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ classNames ]);
+    }, [ classNames, headOnly, fit ]);
 
     const getStyle = useMemo(() =>
     {
         let newStyle: CSSProperties = {};
 
-        if(avatarUrl && avatarUrl.length) newStyle.backgroundImage = `url('${ avatarUrl }')`;
+        if(!fit && avatarUrl && avatarUrl.length) newStyle.backgroundImage = `url('${ avatarUrl }')`;
+
+        if(headOnly && !fit)
+        {
+            newStyle.backgroundSize = '130px auto';
+            newStyle.backgroundPosition = '51% 40%';
+            newStyle.imageRendering = 'pixelated';
+        }
 
         if(scale !== 1)
         {
@@ -52,7 +68,7 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
         if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
 
         return newStyle;
-    }, [ avatarUrl, scale, style ]);
+    }, [ avatarUrl, scale, style, headOnly, fit ]);
 
     useEffect(() =>
     {
@@ -116,5 +132,17 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
         };
     }, []);
 
-    return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />;
+    return (
+        <Base classNames={ getClassNames } style={ getStyle } { ...rest }>
+            { fit && avatarUrl && avatarUrl.length > 0 && (
+                <img
+                    src={ avatarUrl }
+                    alt=""
+                    draggable={ false }
+                    className="absolute inset-0 w-full h-full object-contain"
+                    style={ { imageRendering: 'pixelated', transform: 'translateY(-20%)' } }
+                />
+            ) }
+        </Base>
+    );
 };