ref(chat): clean up extra dom

css/_chat.scss

@@ -1,6 +1,9 @@
 #sideToolbarContainer {
     background-color: $newToolbarBackgroundColor;
-
+    box-sizing: border-box;
+    color: #FFF;
+    display: flex;
+    flex-direction: column;
     /**
      * Make the sidebar flush with the top of the toolbar. Take the size of
      * the toolbar and subtract from 100%.
@@ -21,20 +24,6 @@
     &.slideInExt {
         left: 0;
     }
-
-    .sideToolbarContainer__inner {
-        box-sizing: border-box;
-        color: #FFF;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        width: $sidebarWidth;
-    }
-}
-
-#chat_container * {
-    -webkit-user-select: text;
-    user-select: text;
 }
 
 #chatconversation {
@@ -166,20 +155,27 @@
     right: 5px;
 }
 
-#chat_container .display-name {
+.sideToolbarContainer {
-    float: left;
+    * {
-    padding-left: 5px;
+        -webkit-user-select: text;
-    font-weight: bold;
+        user-select: text;
-    white-space: nowrap;
+    }
-    text-overflow: ellipsis;
-    width: 95%;
-    overflow: hidden;
-}
 
-#chat_container .timestamp {
+    .display-name {
-    float: right;
+        float: left;
-    padding-right: 5px;
+        padding-left: 5px;
-    font-size: 11px;
+        font-weight: bold;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 95%;
+        overflow: hidden;
+    }
+
+    .timestamp {
+        float: right;
+        padding-right: 5px;
+        font-size: 11px;
+    }
 }
 
 .usermessage {

react/features/chat/components/web/Chat.js

@@ -103,15 +103,12 @@ class Chat extends AbstractChat<Props> {
             ref = { this._setMessageListEndRef } />);
 
         return (
-            <div
+            <>
-                className = 'sideToolbarContainer__inner'
-                id = 'chat_container'>
-                { this._renderChatHeader() }
                 <div id = 'chatconversation'>
                     { messages }
                 </div>
                 <ChatInput />
-            </div>
+            </>
         );
     }
 
@@ -167,11 +164,11 @@ class Chat extends AbstractChat<Props> {
         const ComponentToRender = !_isOpen && state === 'exited'
             ? null
             : (
-                <div>
+                <>
                     { this._renderChatHeader() }
                     { _showNamePrompt
                         ? <DisplayNameForm /> : this._renderChat() }
-                </div>
+                </>
             );
         let className = '';
 
@@ -183,7 +180,7 @@ class Chat extends AbstractChat<Props> {
 
         return (
             <div
-                className = { className }
+                className = { `sideToolbarContainer ${className}` }
                 id = 'sideToolbarContainer'>
                 { ComponentToRender }
             </div>