fixed images to be under node

src/components/node/NodeImageSlideBlock/index.tsx

@@ -165,7 +165,8 @@ const NodeImageSlideBlock: FC<IProps> = ({
   const updateMaxHeight = useCallback(() => {
     if (!wrap.current) return;
     const { width } = wrap.current.getBoundingClientRect();
-    setMaxHeight(width * NODE_SETTINGS.MAX_IMAGE_ASPECT);
+    // setMaxHeight(width * NODE_SETTINGS.MAX_IMAGE_ASPECT);
+    setMaxHeight(window.innerHeight - 175);
     normalizeOffset();
   }, [wrap, setMaxHeight, normalizeOffset]);
 

src/components/node/NodeImageSlideBlock/styles.scss

@@ -4,7 +4,8 @@
   min-width: 0;
   width: 100%;
   transition: height 0.25s;
-  border-radius: $radius $radius 0 0;
+  border-radius: $radius;
+  margin-bottom: 20px;
 
   .is_loading {
     .placeholder {
@@ -24,17 +25,21 @@
   user-select: none;
   will-change: transform, height;
   transition: height 500ms, transform 500ms;
+  padding: 10px 0;
 
   &:active {
     transition: none;
   }
 
   .image {
+    // that was for containered image:
     // max-height: 960px;
-    max-height: 120vh !important;
-    max-width: 100%;
+    // max-height: 120vh !important;
+    // max-width: 100%;
     opacity: 1;
-    border-radius: $radius $radius 0 0;
+    border-radius: $radius;
+    box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px,
+      transparentize($color: #000000, $amount: 0.5) 0 4px 10px;
   }
 
   &.is_dragging {

src/containers/node/NodeLayout/index.tsx

@@ -112,12 +112,16 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     }, [nodeSetCoverImage, node.cover]);
 
     return (
-      <Card className={styles.node} seamless>
+      <div className={styles.node}>
         {block &&
           createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
 
+        <Card seamless>
           <NodePanel
-          node={pick(['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'], node)}
+            node={pick(
+              ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'],
+              node
+            )}
             layout={layout}
             can_edit={can_edit}
             can_like={can_like}
@@ -170,7 +174,11 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                     <Sticky>
                       <Group style={{ flex: 1, minWidth: 0 }}>
                         {!is_loading && (
-                        <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
+                          <NodeTags
+                            is_editable={is_user}
+                            tags={node.tags}
+                            onChange={onTagsChange}
+                          />
                         )}
 
                         {is_loading && <NodeRelatedPlaceholder />}
@@ -181,10 +189,17 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                           Object.keys(related.albums)
                             .filter(album => related.albums[album].length > 0)
                             .map(album => (
-                            <NodeRelated title={album} items={related.albums[album]} key={album} />
+                              <NodeRelated
+                                title={album}
+                                items={related.albums[album]}
+                                key={album}
+                              />
                             ))}
 
-                      {!is_loading && related && related.similar && related.similar.length > 0 && (
+                        {!is_loading &&
+                          related &&
+                          related.similar &&
+                          related.similar.length > 0 && (
                             <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
                           )}
                       </Group>
@@ -197,6 +212,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
 
           <Footer />
         </Card>
+      </div>
     );
   }
 );

src/containers/node/NodeLayout/styles.scss

@@ -27,8 +27,8 @@
 }
 
 .node {
-  background: $node_bg;
-  box-shadow: $node_shadow;
+  // background: $node_bg;
+  // box-shadow: $node_shadow;
 }
 
 .buttons {