fix map chat layout and tab bug

app/assets/stylesheets/application.scss.erb

@@ -672,9 +672,21 @@ label {
     position: relative;
     /*overflow:hidden; */
 }
-.main.compressed {
+.compressed {
-  width: calc(100% - 300px);
+  .upperRightUI {
+    right: 324px;
+  }
+  .upperRightMapButtons {
+    right: 434px;
+  }
+  .mapControls {
+    right: 324px;
+  }
+  .infoAndHelp {
+    right: 370px;
+  }
 }
+
 #infovis-canvas {
     -webkit-touch-callout: none;
     -webkit-user-select: none;

frontend/src/components/MapView/MapChat/index.js

@@ -105,9 +105,9 @@ class MapChat extends Component {
   }
 
   render = () => {
-    const rightOffset = this.props.chatOpen ? '0' : '-300px'
+    const { chatOpen, conversationLive, isParticipating, participants, messages, inviteACall, inviteToJoin } = this.props
-    const { conversationLive, isParticipating, participants, messages, inviteACall, inviteToJoin } = this.props
     const { videosShowing, cursorsShowing, alertSound, unreadMessages } = this.state
+    const rightOffset = chatOpen ? '0' : '-300px'
     return (
       <div id="chat-box-wrapper">
         <div className="chat-box"
@@ -148,7 +148,7 @@ class MapChat extends Component {
           <div className="chat-messages" ref={div => { this.messagesDiv = div }}>
             {makeList(messages)}
           </div>
-          <NewMessage messageText={this.state.messageText}
+          {chatOpen && <NewMessage messageText={this.state.messageText}
             focusMessageInput={this.focusMessageInput}
             handleChange={this.handleChange('messageText')}
             textAreaProps={{
@@ -159,7 +159,7 @@ class MapChat extends Component {
               onFocus: this.props.inputFocus,
               onBlur: this.props.inputBlur
             }}
-          />
+          />}
         </div>
       </div>
     )