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,6 +144,7 @@ export default function ChatTextField(props: Props) {
 
   return (
     <div className={s.root}>
+      <div className={s.inputWrapper}>
         <Slate
           editor={editor}
           value={[{ type: 'paragraph', children: [{ text: '' }] }]}
@@ -152,17 +153,25 @@ export default function ChatTextField(props: Props) {
           <Editable
             onKeyDown={onKeyDown}
             renderElement={p => <Element {...p} />}
-          // placeholder="Chat message goes here..."
+            placeholder="Chat message goes here..."
+            style={{ width: '100%' }}
           />
         </Slate>
-      <Button type="default" ghost title="Emoji" onClick={() => setShowEmojis(!showEmojis)}>
-        <SmileOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+        <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"