fixed node related item profile popout

src/components/comment/CommentAvatar/index.tsx

@@ -36,9 +36,9 @@ const CommentAvatar: FC<Props> = ({ user, withDetails, className }) => {
             url={path(['photo', 'url'], user)}
             username={user.username}
             className={className}
-            innerRef={ref}
             onMouseOver={onMouseOver}
             onMouseOut={onMouseOut}
+            ref={ref}
           />
         )}
       </Reference>

src/components/common/Avatar/index.tsx

@@ -1,40 +1,34 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, forwardRef, useCallback } from 'react';
 import { getURLFromString } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { openUserProfile } from '~/utils/user';
 import { DivProps } from '~/utils/types';
+import { Square } from '~/components/common/Square';
 
 interface Props extends DivProps {
   url?: string;
   username?: string;
   size?: number;
   preset?: typeof PRESETS[keyof typeof PRESETS];
-  innerRef?: React.Ref<any>;
 }
 
-const Avatar: FC<Props> = ({
-  url,
-  username,
-  size,
-  className,
-  innerRef,
-  preset = PRESETS.avatar,
-  ...rest
-}) => {
-  const backgroundImage = !!url ? `url('${getURLFromString(url, preset)}')` : undefined;
-  const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
+const Avatar = forwardRef<HTMLDivElement, Props>(
+  ({ url, username, size, className, preset = PRESETS.avatar, ...rest }, ref) => {
+    const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
 
-  return (
-    <div
-      {...rest}
-      className={classNames(styles.avatar, className)}
-      style={{ backgroundImage }}
-      onClick={onOpenProfile}
-      ref={innerRef}
-    />
-  );
-};
+    return (
+      <Square
+        {...rest}
+        image={getURLFromString(url, preset)}
+        className={classNames(styles.avatar, className)}
+        onClick={onOpenProfile}
+        size={size}
+        ref={ref}
+      />
+    );
+  }
+);
 
 export { Avatar };

src/components/common/Square/index.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef, ForwardRefRenderFunction, VFC } from 'react';
+import styles from './styles.module.scss';
+import { DivProps } from '~/utils/types';
+import classNames from 'classnames';
+
+interface SquareProps extends DivProps {
+  image: string;
+  size?: number;
+}
+
+const Square = forwardRef<HTMLDivElement, SquareProps>(({ image, size, ...rest }, ref) => {
+  const backgroundImage = image ? `url('${image}')` : undefined;
+
+  return (
+    <div
+      {...rest}
+      className={classNames(styles.wrapper, rest.className)}
+      style={{ backgroundImage, width: size }}
+      ref={ref}
+    >
+      <svg className={styles.svg} viewBox="0 0 1 1" />
+    </div>
+  );
+});
+
+export { Square };

src/components/common/Square/styles.module.scss

@@ -0,0 +1,10 @@
+@import "src/styles/variables";
+
+.svg {
+  width: 100%;
+}
+
+.wrapper {
+  width: 100%;
+  border-radius: $radius;
+}

src/components/containers/Sticky/index.tsx

@@ -1,5 +1,5 @@
 import React, { DetailsHTMLAttributes, FC } from 'react';
-import StickyBox from 'react-sticky-box';
+import StickyBox from 'react-stickynode';
 
 interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {
   offsetTop?: number;

src/components/lab/LabBanner/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
-import { Square } from '~/components/containers/Square';
+import { Square } from '~/components/lab/LabSquare';
 
 interface IProps {}
 

src/components/node/NodeRelatedItem/index.tsx

@@ -4,9 +4,10 @@ import classNames from 'classnames';
 import { INode } from '~/types';
 import { PRESETS, URLS } from '~/constants/urls';
 import { RouteComponentProps, withRouter } from 'react-router';
-import { getURL } from '~/utils/dom';
+import { getURL, getURLFromString } from '~/utils/dom';
 import { Avatar } from '~/components/common/Avatar';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
+import { Square } from '~/components/common/Square';
 
 type IProps = RouteComponentProps & {
   item: Partial<INode>;
@@ -68,11 +69,13 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
       onClick={onClick}
       ref={ref}
     >
-      <Avatar
-        username={item.title}
-        url={item.thumbnail}
-        className={classNames(styles.thumb, { [styles.is_loaded]: is_loaded })}
-      />
+      {item.thumbnail && (
+        <Square
+          image={getURLFromString(item.thumbnail, 'avatar')}
+          onClick={onClick}
+          className={classNames(styles.thumb, { [styles.is_loaded]: is_loaded })}
+        />
+      )}
 
       {!item.thumbnail && size === 'small' && (
         <div className={styles.letters} style={{ background }}>

src/containers/node/NodeBottomBlock/styles.module.scss

@@ -48,6 +48,7 @@
 .left {
   flex: 1;
   min-width: 0;
+  height: 100%;
 }
 
 .left_item {

src/hooks/auth/useMessageEventReactions.ts

@@ -20,7 +20,7 @@ export const useMessageEventReactions = () => {
         return;
       }
 
-      console.log('caught event:', type);
+      console.log('caught event:', type, event.data);
 
       switch (type) {
         case EventMessageType.OAuthLogin: