Dialogs list component update

src/components/Inbox/DialogCard.module.scss

@@ -17,20 +17,22 @@
     margin-right: 12px;
   }
 
-  .body {
+  .row {
     flex-basis: 0;
     flex-grow: 1;
     min-width: 0;
 
-    .name {
-      color: #141414;
-      font-weight: 500;
-    }
-
+    .name,
     .message {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+    }
+    .name {
+      color: #141414;
+      font-weight: 500;
+    }
+    .message {
       color: #9fa1a7;
     }
   }

src/components/Inbox/DialogCard.tsx

@@ -15,7 +15,7 @@ const DialogCard = (props: Props) => {
       <div class={styles.avatar}>
         <DialogAvatar name={props.name} url={props.userpic} online={props.online} />
       </div>
-      <div class={styles.body}>
+      <div class={styles.row}>
         <div class={styles.name}>{props.name}</div>
         <div class={styles.message}>
           Указать предпочтительные языки для результатов поиска можно в разделе

src/components/Views/Inbox.tsx

@@ -64,7 +64,7 @@ export const InboxView = () => {
   })
 
   const getQuery = (query) => {
-    if (query().length > 2) {
+    if (query().length >= 2) {
       const match = userSearch(authors(), query())
       setAuthors(match)
     } else {
@@ -131,7 +131,6 @@ export const InboxView = () => {
               </li>
             </ul>
           </div>
-
           <div class="dialogs">
             <For each={authors()}>
               {(author) => <DialogCard name={author.name} slug={author.slug} online={true} />}

src/styles/Inbox.scss

@@ -34,7 +34,7 @@ main {
 .chat-list {
   display: flex;
   flex-direction: column;
-  padding: 0 10px;
+  padding: 10px;
   height: 100vh;
 
   .dialogs {
@@ -44,22 +44,6 @@ main {
     height: 100%;
     box-sizing: border-box;
     position: relative;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      height: 10px;
-      width: 100%;
-    }
-    &::before {
-      top: 0;
-      background: linear-gradient(to bottom, #fff, transparent 70%);
-    }
-    &::after {
-      bottom: 0;
-      background: linear-gradient(to top, #fff, transparent 70%);
-    }
   }
 }