Update chat input

src/views/room/widgets/chat-input/ChatInputView.scss

@@ -1,15 +1,13 @@
 @media only screen and (max-width: 600px) {
     .nitro-chat-input {
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
         bottom: 65px !important;
     }
 }
 
 .nitro-chat-input {
-    position: fixed;
-    display: flex;
-    bottom: 9px;
-    left: 50%;
-    transform: translateX(-50%);
     pointer-events: none;
     z-index: $chatinput-zindex;
 

src/views/room/widgets/chat-input/ChatInputView.tsx

@@ -1,4 +1,5 @@
 import { createRef, FC, MouseEvent, useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { SendChatTypingMessage } from '../../../../api/nitro/session/SendChatTypingMessage';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { ChatInputViewProps } from './ChatInputView.types';
@@ -136,6 +137,7 @@ export const ChatInputView: FC<ChatInputViewProps> = props =>
     }, [ chatValue ]);
 
     return (
+        createPortal(
         <div className="nitro-chat-input">
             <div className="chatinput-container">
                 <div className="input-sizer">
@@ -143,6 +145,6 @@ export const ChatInputView: FC<ChatInputViewProps> = props =>
                     {/* <input #chatInputView type="text" class="chat-input" placeholder="{{ 'widgets.chatinput.default' | translate }}" (input)="chatInputView.parentElement.dataset.value = chatInputView.value" [disabled]="floodBlocked" [maxLength]="inputMaxLength" /> */}
                 </div>
             </div>
-        </div>
+        </div>, document.getElementById('toolbar-chat-input-container'))
     );
 }

src/views/toolbar/ToolbarView.scss

@@ -3,7 +3,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 59px;
+    height: 55px;
     z-index: $toolbar-zindex;
     
     .nitro-toolbar {
@@ -13,6 +13,10 @@
         border-top: 1px solid #101010;
         box-shadow: inset 0px 2px rgba(255, 255, 255, .1);
 
+        #toolbar-chat-input-container {
+            margin-left: 25px;
+        }
+
         .navigation-items {
             display: flex;
             align-items: center;

src/views/toolbar/ToolbarView.tsx

@@ -98,6 +98,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
                             <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
                     </div>
                 </div>
+                <div id="toolbar-chat-input-container" className="d-flex align-items-center" />
             </div>
         </>
     );