feat: tweak UXs

src/routes/chat/ChannelChat/index.js

@@ -91,7 +91,7 @@ export default function ChannelChat({
       contacts={
         <StyledContacts>
           {filteredUsers.map(({ name, status, uid }) => {
-            return <Contact key={name} uid={uid} status={status} />;
+            return <Contact key={name} uid={uid} status={status} popover />;
           })}
         </StyledContacts>
       }

src/routes/chat/DMChat/styled.js

@@ -51,6 +51,7 @@ export const StyledDMChat = styled.article`
     display: flex;
     flex-direction: column;
     padding: 0 16px;
+    padding-top: 10px;
     height: calc(100vh - 56px - 80px);
     overflow-y: scroll;
     overflow-x: visible;

src/routes/chat/styled.js

@@ -104,13 +104,18 @@ const StyledWrapper = styled.div`
             .up {
               display: flex;
               justify-content: space-between;
+              align-items: center;
               .name {
                 font-weight: 600;
                 font-size: 14px;
                 line-height: 20px;
                 color: #52525b;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
               }
               time {
+                white-space: nowrap;
                 font-weight: 500;
                 font-size: 12px;
                 line-height: 18px;