refactored node header

src/components/node/NodePanel/index.tsx

@@ -1,5 +1,4 @@
 import React, { FC, memo } from 'react';
-import styles from './styles.module.scss';
 import { INode } from '~/redux/types';
 import { NodePanelInner } from '~/components/node/NodePanelInner';
 import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
@@ -16,19 +15,17 @@ const NodePanel: FC<IProps> = memo(({ node, isLoading }) => {
   const { onEdit, onLike, onStar, onLock } = useNodeActions(node);
 
   return (
-    <div className={styles.place}>
-      <NodePanelInner
-        node={node}
-        onEdit={onEdit}
-        onLike={onLike}
-        onStar={onStar}
-        onLock={onLock}
-        canEdit={can_edit}
-        canLike={can_like}
-        canStar={can_star}
-        isLoading={!!isLoading}
-      />
-    </div>
+    <NodePanelInner
+      node={node}
+      onEdit={onEdit}
+      onLike={onLike}
+      onStar={onStar}
+      onLock={onLock}
+      canEdit={can_edit}
+      canLike={can_like}
+      canStar={can_star}
+      isLoading={!!isLoading}
+    />
   );
 }, shallowEqual);
 

src/components/node/NodePanel/styles.module.scss

@@ -1,8 +0,0 @@
-@import "src/styles/variables";
-
-.place {
-  @include row_shadow;
-  position: relative;
-  z-index: 3;
-  margin-top: -$radius;
-}

src/layouts/NodeLayout/index.tsx

@@ -55,7 +55,9 @@ const NodeLayout: FC<IProps> = memo(
           <Card className={styles.node} seamless>
             {block}
 
-            <NodePanel node={current} isLoading={is_loading} />
+            <div className={styles.panel}>
+              <NodePanel node={current} isLoading={is_loading} />
+            </div>
 
             <NodeBottomBlock
               canEdit={canEdit}

src/layouts/NodeLayout/styles.module.scss

@@ -49,3 +49,12 @@
   border-radius: $panel_radius;
   box-shadow: $comment_shadow;
 }
+
+.panel {
+  @include row_shadow;
+
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: stretch;
+}