title appearance fixed

src/components/node/NodeComments/index.tsx

@@ -35,8 +35,6 @@ const NodeComments: FC<IProps> = memo(({ comments, comment_data, user, onDelete,
           onEdit={onEdit}
         />
       ))}
-
-      <Filler />
     </div>
   );
 });

src/components/node/NodeNoComments/index.tsx

@@ -1,23 +1,21 @@
-import React, { FC } from "react";
-import * as styles from "./styles.scss";
-import { Group } from "~/components/containers/Group";
-import classNames from "classnames";
-import { Filler } from "~/components/containers/Filler";
-import { ERRORS } from "~/constants/errors";
-import { t } from "~/utils/trans";
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import { Group } from '~/components/containers/Group';
+import classNames from 'classnames';
+import { Filler } from '~/components/containers/Filler';
+import { ERRORS } from '~/constants/errors';
+import { t } from '~/utils/trans';
 
 interface IProps {
   is_loading?: boolean;
 }
 
 const NodeNoComments: FC<IProps> = ({ is_loading = false }) => (
-  <>
-    <Group className={classNames(styles.wrap, { is_loading })}>
-      <div className={styles.card} />
-      <div className={styles.card}>{!is_loading && t(ERRORS.NO_COMMENTS)}</div>
-      <div className={styles.card} />
-    </Group>
-  </>
+  <Group className={classNames(styles.wrap, { is_loading })}>
+    <div className={styles.card} />
+    <div className={styles.card}>{!is_loading && t(ERRORS.NO_COMMENTS)}</div>
+    <div className={styles.card} />
+  </Group>
 );
 
 export { NodeNoComments };

src/components/node/NodeNoComments/styles.scss

@@ -1,18 +1,20 @@
-@keyframes fade {
-  0% {
-    // opacity: 0.25;
-  }
-  100% {
-    // opacity: 0.1;
-  }
-}
 .wrap {
   user-select: none;
-  height: 300px;
+  // height: 300px;
   overflow: hidden;
   position: relative;
+  flex: 0 0 auto;
 
-  // @include after_shade($node_bg);
+  &::after {
+    content: ' ';
+    position: absolute;
+    background: linear-gradient(transparentize($node_bg, 1), $node_bg);
+    border-radius: 0 0 $radius $radius;
+    height: 100px;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+  }
 
   &:global(.is_loading) {
     opacity: 1;
@@ -22,6 +24,10 @@
       animation: fade 0.5s infinite alternate;
     }
   }
+
+  @include tablet {
+    display: none;
+  }
 }
 
 .card {
@@ -36,14 +42,4 @@
   font: $font_18_semibold;
   color: transparentize(white, 0.5);
   flex: 0 0 $comment_height;
-
-  // @include outer_shadow();
-
-  &:nth-child(2) {
-    // animation-delay: -300ms !important;
-  }
-
-  &:nth-child(3) {
-    // animation-delay: -600ms !important;
-  }
 }

src/components/node/NodePanelInner/styles.scss

@@ -24,18 +24,19 @@
 .content {
   flex: 0 1 $content_width;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: stretch;
   border-radius: $radius $radius 0 0;
   box-sizing: border-box;
   padding: $gap;
   background: $node_bg;
-  // height: 72px;
 
   @include outer_shadow();
 
   @include tablet {
     border-radius: 0;
+    flex-direction: column;
+    align-items: flex-start;
   }
 
   @include can_backdrop {
@@ -51,7 +52,7 @@
   padding-bottom: 6px;
 
   @include tablet {
-    font-size: 16px;
+    // font-size: 16px;
     word-break: break-word;
     padding-bottom: 0;
     padding-top: 10px;
@@ -84,7 +85,6 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-top: 10px;
 
   & > * {
     margin: 0 $gap;
@@ -125,6 +125,11 @@
       }
     }
   }
+
+  @include tablet {
+    margin-top: $gap * 2;
+    align-self: center;
+  }
 }
 
 .mark {