Only show send button on mobile. Make buttons inline with input field

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

@@ -1,14 +1,15 @@
 .root {
   position: relative;
+  display: flex;
   bottom: 0px;
   width: 100%;
-  padding: .3rem;
-  color: var(--text-secondry);
+  padding: 0.3rem;
+  color: var(--theme-text-secondary);
   overflow-x: hidden;
-  div[role=textbox] {
+  div[role='textbox'] {
     font-size: 0.9rem;
-    border-radius: .2rem;
-    padding: .6rem;
+    border-radius: 0.2rem;
+    padding: 0.6rem;
     padding-right: calc(0.6rem + 44px);
     background-color: var(--color-owncast-gray-700);
     box-shadow: 0;
@@ -24,25 +25,12 @@
 
   .inputWrapper {
     display: flex;
+    flex-direction: row;
     position: relative;
-    margin-right: .3rem;
-    border-radius: .2rem;
+    margin-right: 0.3rem;
+    border-radius: 0.2rem;
     & > div {
-      transition: box-shadow .2s ease-in-out;
-    }
-  }
-
-  .emojiButton {
-    border: none;
-    background: none;
-    cursor: pointer;
-    padding: 0 1rem;
-    position: absolute;
-    right: 0px;
-    top: 50%;
-    transform: translateY(-50%);
-    svg {
-      fill: var(--color-owncast-gray-300);
+      transition: box-shadow 0.2s ease-in-out;
     }
   }
 
@@ -53,16 +41,18 @@
   }
 }
 
+.sendButton {
+  display: none;
 
-
-.mobile {
-  &.root {
-    display: flex;
-    .inputWrapper {
-      flex: 1;
-    }
-    .submitButtonWrapper {
-      padding: 0px;
-    }
+  @media (max-width: 768px) {
+    display: inline;
+    margin-left: 5px;
   }
 }
+
+.emojiButton {
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0 1rem;
+}

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -4,10 +4,9 @@ import React, { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Transforms, createEditor, BaseEditor, Text } from 'slate';
 import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
-import cn from 'classnames';
 import EmojiPicker from './EmojiPicker';
 import WebsocketService from '../../../services/websocket-service';
-import { isMobileAtom, websocketServiceAtom } from '../../stores/ClientConfigStore';
+import { websocketServiceAtom } from '../../stores/ClientConfigStore';
 import { MessageType } from '../../../interfaces/socket-events';
 import s from './ChatTextField.module.scss';
 
@@ -102,7 +101,6 @@ export default function ChatTextField(props: Props) {
   // const { value: originalValue } = props;
   const [showEmojis, setShowEmojis] = useState(false);
   const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
-  const isMobile = useRecoilValue<boolean>(isMobileAtom);
   const [editor] = useState(() => withImages(withReact(createEditor())));
 
   const sendMessage = () => {
@@ -144,12 +142,8 @@ export default function ChatTextField(props: Props) {
   };
 
   return (
-    <div
-      className={cn(s.root, {
-        [s.mobile]: isMobile,
-      })}
-    >
-      <div className={s.inputWrapper}>
+    <div>
+      <div className={s.root}>
         <Slate
           editor={editor}
           value={[{ type: 'paragraph', children: [{ text: '' }] }]}
@@ -162,7 +156,14 @@ export default function ChatTextField(props: Props) {
             style={{ width: '100%' }}
             autoFocus
           />
+          <Popover
+            content={<EmojiPicker onEmojiSelect={handleEmojiSelect} />}
+            trigger="click"
+            onVisibleChange={visible => setShowEmojis(visible)}
+            visible={showEmojis}
+          />
         </Slate>
+
         <button
           type="button"
           className={s.emojiButton}
@@ -171,23 +172,14 @@ export default function ChatTextField(props: Props) {
         >
           <SmileOutlined />
         </button>
+        <Button
+          className={s.sendButton}
+          size="large"
+          type="ghost"
+          icon={<SendOutlined />}
+          onClick={sendMessage}
+        />
       </div>
-      <div className={s.submitButtonWrapper}>
-        {isMobile ? (
-          <Button size="large" type="ghost" icon={<SendOutlined />} onClick={sendMessage} />
-        ) : (
-          <Button type="primary" icon={<SendOutlined />} onClick={sendMessage}>
-            Send
-          </Button>
-        )}
-      </div>
-      <Popover
-        content={<EmojiPicker onEmojiSelect={handleEmojiSelect} />}
-        trigger="click"
-        onVisibleChange={visible => setShowEmojis(visible)}
-        visible={showEmojis}
-        // placement="topRight"
-      />
     </div>
   );
 }