fixed flow appearance

src/components/flow/Cell/styles.scss

@@ -166,6 +166,7 @@
       max-width: 100%;
       // height: auto;
       width: auto;
+      padding: ($grid_line / 2) $grid_line $grid_line $grid_line;
     }
 
     .horizontal > &.has_text {
@@ -176,9 +177,11 @@
       // height: auto;
       width: auto;
       bottom: 0;
+      padding: $grid_line ($grid_line / 2) $grid_line $grid_line;
     }
 
     .quadro > &.has_text {
+      padding: ($grid_line / 2) ($grid_line / 2) $grid_line $grid_line;
       top: auto;
       height: 50%;
       max-width: 50%;

src/components/node/NodeRelated/index.tsx

@@ -1,15 +1,17 @@
-import React, { FC, HTMLAttributes } from 'react';
-import { range } from 'ramda';
+import React, { FC } from 'react';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
 import { INode } from '~/redux/types';
 import { getURL } from '~/utils/dom';
+import { withRouter, RouteComponentProps } from 'react-router';
+import { URLS } from '~/constants/urls';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type IProps = RouteComponentProps & {
+  title: string;
   items: Partial<INode>[];
 };
 
-const NodeRelated: FC<IProps> = ({ title, items }) => (
+const NodeRelatedUnconnected: FC<IProps> = ({ title, items, history }) => (
   <Group className={styles.wrap}>
     <div className={styles.title}>
       <div className={styles.line} />
@@ -22,10 +24,13 @@ const NodeRelated: FC<IProps> = ({ title, items }) => (
           className={styles.item}
           key={item.id}
           style={{ backgroundImage: `url("${getURL({ url: item.thumbnail })}")` }}
+          onClick={() => history.push(URLS.NODE_URL(item.id))}
         />
       ))}
     </div>
   </Group>
 );
 
+const NodeRelated = withRouter(NodeRelatedUnconnected);
+
 export { NodeRelated };

src/components/node/NodeRelated/styles.scss

@@ -23,6 +23,7 @@
   background-size: cover;
   padding-bottom: 100%;
   border-radius: $cell_radius;
+  cursor: pointer;
 }
 
 .title {