fixed appearance for mobile

src/components/flow/Cell/styles.scss

@@ -59,6 +59,10 @@
 
   box-sizing: border-box;
   word-break: break-word;
+
+  @media (max-width: $cell * 2) {
+    font: $font_18_semibold;
+  }
 }
 
 .title {
@@ -221,6 +225,7 @@
   @media (max-width: $cell * 2 + $grid_line) {
     right: 0;
     top: 0;
+    display: none;
   }
 }
 

src/components/flow/FlowGrid/styles.scss

@@ -44,9 +44,9 @@ $stamp_color: $content_bg;
   }
 
   @media (max-width: $cell * 2) {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(2, 1fr);
     grid-template-rows: 40vh 75vw;
-    grid-auto-rows: 75vw;
+    grid-auto-rows: 50vw;
     grid-column-gap: $gap;
     grid-row-gap: $gap;
   }

src/components/node/NodeImageSlideBlock/index.tsx

@@ -37,6 +37,11 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     [node]
   );
 
+  useEffect(() => {
+    setLoaded({});
+    refs.current = {};
+  }, [images]);
+
   const updateSizes = useCallback(() => {
     const values = Object.keys(refs.current).reduce((obj, key) => {
       const ref = refs.current[key];
@@ -53,7 +58,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     index => el => {
       refs.current[index] = el;
     },
-    [refs, heights, setHeights]
+    [refs, heights, setHeights, images]
   );
 
   const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
@@ -62,8 +67,8 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
   ]);
 
   // update outside hooks
-  useEffect(() => updateLayout(), [loaded, height]);
+  useEffect(() => updateLayout(), [loaded, height, images]);
-  useEffect(() => updateSizes(), [refs, current, loaded]);
+  useEffect(() => updateSizes(), [refs, current, loaded, images]);
 
   useEffect(() => {
     if (!wrap || !wrap.current) return;
@@ -77,7 +82,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     if (current !== Math.round(selected)) setCurrent(Math.round(selected));
 
     setHeight(now);
-  }, [offset, heights, max_height]);
+  }, [offset, heights, max_height, images]);
 
   const onDrag = useCallback(
     event => {
@@ -136,7 +141,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     [setIsDragging, setInitialX, offset, setInitialOffset]
   );
 
-  useEffect(() => updateMaxHeight(), []);
+  useEffect(() => updateMaxHeight(), [images]);
 
   useEffect(() => {
     window.addEventListener('resize', updateSizes);

src/styles/variables.scss

@@ -8,7 +8,7 @@ $spc: $gap * 2;
 $comment_height: 72px;
 $bar_height: 64px;
 
-$radius: 2px;
+$radius: 4px;
 $cell_radius: $radius;
 $panel_radius: $radius;
 $input_radius: $radius;