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,7 +15,6 @@ const NodePanel: FC<IProps> = memo(({ node, isLoading }) => {
   const { onEdit, onLike, onStar, onLock } = useNodeActions(node);
 
   return (
-    <div className={styles.place}>
     <NodePanelInner
       node={node}
       onEdit={onEdit}
@@ -28,7 +26,6 @@ const NodePanel: FC<IProps> = memo(({ node, isLoading }) => {
       canStar={can_star}
       isLoading={!!isLoading}
     />
-    </div>
   );
 }, 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}
 
+            <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;
+}