fixed comments appearance

src/components/containers/CommentWrapper/index.tsx

@@ -3,21 +3,26 @@ import classNames from 'classnames';
 
 import * as styles from './styles.scss';
 import { Card } from '../Card';
+import { IUser } from '~/redux/auth/types';
+import { getURL } from '~/utils/dom';
+import path from 'ramda/es/path';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
-  photo?: string;
+  // photo?: string;
+  user: IUser;
   is_empty?: boolean;
   is_loading?: boolean;
   is_same?: boolean;
 };
 
 const CommentWrapper: FC<IProps> = ({
-  photo,
+  // photo,
   children,
   is_empty,
   is_loading,
   className,
   is_same,
+  user,
   ...props
 }) => (
   <Card
@@ -26,9 +31,11 @@ const CommentWrapper: FC<IProps> = ({
     {...props}
   >
     <div className={styles.thumb}>
-      {!is_same && photo && (
-        <div className={styles.thumb_image} style={{ backgroundImage: `url("${photo}")` }} />
-      )}
+      <div
+        className={styles.thumb_image}
+        style={{ backgroundImage: `url("${getURL(path(['photo'], user))}")` }}
+      />
+      <div className={styles.thumb_user}>~{path(['username'], user)}</div>
     </div>
 
     <div className={styles.text}>{children}</div>

src/components/containers/CommentWrapper/styles.scss

@@ -14,6 +14,10 @@
     margin: 0 !important;
     border-radius: 0;
   }
+
+  @include tablet {
+    flex-direction: column;
+  }
 }
 
 .text {
@@ -25,6 +29,17 @@
   flex: 0 0 $comment_height;
   border-radius: $panel_radius 0 0 $panel_radius;
   background-color: transparentize(black, 0.9);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  @include tablet {
+    flex-direction: row;
+    flex: 0 0 40px;
+    padding: 8px;
+    box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
+    border-radius: $panel_radius $panel_radius 0 0;
+  }
 }
 
 .thumb_image {
@@ -32,4 +47,25 @@
   background: transparentize(white, 0.97) no-repeat 50% 50%;
   border-radius: $panel_radius 0 0 $panel_radius;
   background-size: cover;
+  flex: 0 0 $comment_height;
+
+  @include tablet {
+    height: 32px;
+    flex: 0 0 32px;
+    border-radius: $panel_radius;
+  }
+}
+
+.thumb_user {
+  display: none;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  padding: 0 $gap;
+  font: $font_14_medium;
+
+  @include tablet {
+    display: flex;
+  }
 }

src/components/node/Comment/index.tsx

@@ -25,7 +25,7 @@ const Comment: FC<IProps> = ({
       className={className}
       is_empty={is_empty}
       is_loading={is_loading}
-      photo={getURL(comment_group.user.photo)}
+      user={comment_group.user}
       is_same={is_same}
       {...props}
     >

src/components/node/CommentForm/index.tsx

@@ -42,7 +42,7 @@ type IProps = ReturnType<typeof mapStateToProps> &
 const CommentFormUnconnected: FC<IProps> = ({
   node: { comment_data, is_sending_comment },
   uploads: { statuses, files },
-  user: { photo },
+  user,
   id,
   nodePostComment,
   nodeSetCommentData,
@@ -122,7 +122,7 @@ const CommentFormUnconnected: FC<IProps> = ({
   const comment = comment_data[id];
 
   return (
-    <CommentWrapper photo={getURL(photo)}>
+    <CommentWrapper user={user}>
       <form onSubmit={onSubmit} className={styles.wrap}>
         <div className={styles.input}>
           <Textarea