added initial profile dialog

src/containers/node/BorisLayout/index.tsx

@@ -9,6 +9,7 @@ import styles from './styles.scss';
 import { CommentForm } from '~/components/node/CommentForm';
 import { Group } from '~/components/containers/Group';
 import boris from '~/sprites/boris_robot.svg';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
@@ -78,7 +79,11 @@ const BorisLayoutUnconnected: FC<IProps> = ({
         <Group className={styles.content}>
           {is_user && <CommentForm id={0} />}
 
-          <NodeComments comments={comments} />
+          {is_loading_comments ? (
+            <NodeNoComments is_loading />
+          ) : (
+            <NodeComments comments={comments} />
+          )}
         </Group>
       </div>
     </div>

src/containers/node/BorisLayout/styles.scss

@@ -11,6 +11,7 @@
   padding: $gap;
   background: $content_bg;
   border-radius: $radius;
+  flex: 0 1 $limited_width;
 }
 
 .column {
@@ -70,12 +71,13 @@
   align-items: flex-start;
   justify-content: center;
   flex-direction: row;
-  width: 80%;
-  margin: auto;
+  flex: 0 1 $limited_width;
+  width: 100%;
+  // margin: auto;
 
-  @include tablet {
-    width: 100%;
-  }
+  // @include tablet {
+  // width: 100%;
+  // }
 }
 
 .image {
@@ -101,9 +103,10 @@
 
 .caption {
   position: absolute;
-  left: 0;
+  left: 50%;
   bottom: 0;
-  width: 50%;
+  width: 100%;
+  max-width: $limited_width;
   height: 100%;
   display: flex;
   align-items: flex-start;
@@ -114,6 +117,7 @@
   flex-direction: column;
   padding-bottom: $gap * 2;
   padding: 0 10% $gap * 2;
+  transform: translate(-50%, 0);
 
   @include tablet {
     align-items: flex-start;