Few changes to Chat input

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -1,8 +1,13 @@
 .root {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
   padding: .3rem;
   color: var(--text-secondry);
+  overflow-x: hidden;
   div[role=textbox] {
     padding: .6rem;
+    padding-right: calc(0.6rem + 44px);
     border-radius: .35rem;
     background-color: var(--color-owncast-gray-700);
     & > p {
@@ -10,3 +15,22 @@
     }
   }
 }
+.inputWrapper {
+  display: flex;
+  position: relative;
+}
+
+.emojiButton {
+  border: none;
+  margin-right: 5px;
+  position: absolute;
+  right: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.submitButtonWrapper {
+  display: flex;
+  padding: 6px 0;
+  justify-content: flex-end;
+}

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -144,25 +144,34 @@ export default function ChatTextField(props: Props) {
 
   return (
     <div className={s.root}>
-      <Slate
-        editor={editor}
-        value={[{ type: 'paragraph', children: [{ text: '' }] }]}
-        onChange={handleChange}
-      >
-        <Editable
-          onKeyDown={onKeyDown}
-          renderElement={p => <Element {...p} />}
-          // placeholder="Chat message goes here..."
-        />
-      </Slate>
-      <Button type="default" ghost title="Emoji" onClick={() => setShowEmojis(!showEmojis)}>
-        <SmileOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
-      </Button>
-
-      <Button size={size} type="primary" onClick={sendMessage}>
-        Submit
-      </Button>
-
+      <div className={s.inputWrapper}>
+        <Slate
+          editor={editor}
+          value={[{ type: 'paragraph', children: [{ text: '' }] }]}
+          onChange={handleChange}
+        >
+          <Editable
+            onKeyDown={onKeyDown}
+            renderElement={p => <Element {...p} />}
+            placeholder="Chat message goes here..."
+            style={{ width: '100%' }}
+          />
+        </Slate>
+        <Button
+          className={s.emojiButton}
+          type="default"
+          ghost
+          title="Emoji"
+          onClick={() => setShowEmojis(!showEmojis)}
+        >
+          <SmileOutlined />
+        </Button>
+      </div>
+      <div className={s.submitButtonWrapper}>
+        <Button size={size} type="primary" onClick={sendMessage}>
+          Submit
+        </Button>
+      </div>
       <Popover
         content={<EmojiPicker onEmojiSelect={handleEmojiSelect} />}
         trigger="click"