fixing overflow on conversation header

net/web/src/session/contact/Contact.jsx

@@ -117,15 +117,18 @@ export function Contact({ close, guid, listing }) {
       { state.init && state.display !== 'xlarge' && (
         <div class="view">
           <div class="title">
-            { state.display === 'small' && (
+            <div class="close" />
-              <div class="close"></div>
-            )}
             <div class="handle">{ state.handle }</div>
             { state.display === 'small' && (
               <div class="close" onClick={close}>
                 <CloseOutlined />
               </div>
             )}
+            { state.display !== 'small' && (
+              <div class="close" onClick={close}>
+                <RightOutlined />
+              </div>
+            )}
           </div>
           { Image }
           { Details }

net/web/src/session/conversation/Conversation.jsx

@@ -13,7 +13,9 @@ console.log(state);
     <ConversationWrapper>
       <div class="header">
         <div class="title">
-          <Logo img={state.image} url={state.logo} width={32} height={32} radius={4} />
+          <div class="logo">
+            <Logo img={state.image} url={state.logo} width={32} height={32} radius={4} />
+          </div>
           <div class="label">{ state.subject }</div>
           { state.display !== 'xlarge' && (
             <div class="button" onClick={openDetails}>

net/web/src/session/conversation/Conversation.styled.js

@@ -26,9 +26,18 @@ export const ConversationWrapper = styled.div`
       display: flex;
       flex-direction: row;
       align-items: center;
+      min-width: 0;
 
       .label {
         padding-left: 8px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        min-width: 0;
+      }
+
+      .logo {
+        flex-shrink: 0;
       }
     }