Misc web updates (#147)

* Try and clarify max viewer count string

* Shrink title font size on small screens to fit username

* Hide stream info on small screens to buy some space

* Hide emoji button on small screens until we can fix it. For #140

* Make jumping to bottom be a part of the render pass to fix race condition. For #140

* Remove About in info view. We can add it back. Just playing with that since it was missing a space anyway

* address some own mr comments

Co-authored-by: Ginger Wong <omqmail@gmail.com>

webroot/js/components/chat/chat.js

@@ -27,6 +27,9 @@ export default class Chat extends Component {
     this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
     this.websocketDisconnected = this.websocketDisconnected.bind(this);
     this.submitChat = this.submitChat.bind(this);
+    this.submitChat = this.submitChat.bind(this);
+    this.scrollToBottom = this.scrollToBottom.bind(this);
+    this.jumpToBottomPending = false;
   }
 
   componentDidMount() {
@@ -52,7 +55,7 @@ export default class Chat extends Component {
     }
     // scroll to bottom of messages list when new ones come in
     if (messages.length > prevMessages.length) {
-      jumpToBottom(this.scrollableMessagesContainer.current);
+      this.jumpToBottomPending = true;
     }
   }
 
@@ -161,24 +164,41 @@ export default class Chat extends Component {
     return [];
   }
 
+  scrollToBottom() {
+    jumpToBottom(this.scrollableMessagesContainer.current);
+  }
 
   render(props, state) {
     const { username, messagesOnly, chatInputEnabled } = props;
-    const { messages, inputEnabled, chatUserNames } = state;
+    const { messages, chatUserNames } = state;
 
-    const messageList = messages.map((message) => (html`<${Message} message=${message} username=${username} key=${message.id} />`));
+    const messageList = messages.map(
+      (message) =>
+        html`<${Message}
+          message=${message}
+          username=${username}
+          key=${message.id}
+        />`
+    );
+
+    // After the render completes (based on requestAnimationFrame) then jump to bottom.
+    // This hopefully fixes the race conditions where jumpTobottom fires before the
+    // DOM element has re-drawn with its new size.
+    if (this.jumpToBottomPending) {
+      this.jumpToBottomPending = false;
+      window.requestAnimationFrame(this.scrollToBottom);
+    }
 
     if (messagesOnly) {
-      return (
-        html`
-          <div
-            id="messages-container"
-            ref=${this.scrollableMessagesContainer}
-            class="py-1 overflow-auto"
-          >
-            ${messageList}
-          </div>
-      `);
+      return html`
+        <div
+          id="messages-container"
+          ref=${this.scrollableMessagesContainer}
+          class="py-1 overflow-auto"
+        >
+          ${messageList}
+        </div>
+      `;
     }
 
     return html`