diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index e73af6a..175f19b 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -15,12 +15,12 @@
   return (
     <React.Fragment>
       <Box className="conversation-header">
-        <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
+        <Box style={{ margin: 16, flexShrink: 0 }}>
           <ConversationAvatar displayName={props.conversation.getDisplayNameNoFallback()} />
         </Box>
-        <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-          <Typography variant="h6">{displayName}</Typography>
-          <Typography variant="subtitle1">{props.conversation.getId()}</Typography>
+        <Box style={{ flex: "1 1 auto", overflow: 'hidden' }}>
+          <Typography className="title" variant="h6">{displayName}</Typography>
+          <Typography className="subtitle" variant="subtitle1" >{props.conversation.getId()}</Typography>
         </Box>
         <Divider orientation="horizontal" />
       </Box>