fix responsive styles

webroot/js/components/chat/chat-input.js

@@ -232,7 +232,7 @@ export default class ChatInput extends Component {
     const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage);
     return (
       html`
-        <div id="message-input-container" class="w-full shadow-md bg-gray-900 border-t border-gray-700 border-solid p-4">
+        <div id="message-input-container" class="fixed bottom-0 shadow-md bg-gray-900 border-t border-gray-700 border-solid p-4">
 
           <${ContentEditable}
             id="message-input"

webroot/js/components/chat/chat.js

@@ -21,14 +21,11 @@ export default class Chat extends Component {
 
     this.scrollableMessagesContainer = createRef();
 
-
     this.websocket = null;
 
     this.getChatHistory = this.getChatHistory.bind(this);
     this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
     this.websocketDisconnected = this.websocketDisconnected.bind(this);
-
-    // this.handleSubmitChatButton = this.handleSubmitChatButton.bind(this);
     this.submitChat = this.submitChat.bind(this);
   }
 
@@ -39,7 +36,6 @@ export default class Chat extends Component {
    if (hasTouchScreen()) {
     setVHvar();
     window.addEventListener("orientationchange", setVHvar);
-    // this.tagAppContainer.classList.add('touch-screen');
     }
   }
 

webroot/js/components/chat/username.js

@@ -22,8 +22,9 @@ export default class UsernameForm extends Component {
   }
 
   handleDisplayForm() {
+    const { displayForm: curDisplay } = this.state;
     this.setState({
-      displayForm: true,
+      displayForm: !curDisplay,
     });
   }
 
@@ -65,7 +66,7 @@ export default class UsernameForm extends Component {
     const formDisplayStyle = narrowSpace ? 'inline-block' : 'flex';
     const styles = {
       info: {
-        display: displayForm || narrowSpace ? 'none' : 'flex',
+        display: displayForm ? 'none' : 'flex',
       },
       form: {
         display: displayForm ? formDisplayStyle : 'none',