From a24bcf9f86d9795566e68f82a007ce70d053ab83 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 20 Jun 2021 20:36:52 +0100
Subject: [PATCH] Fix mobile height. Add send button.

---
 .../common/messaging/MessageBox.tsx           | 25 ++++++++++++-------
 src/pages/RevoltApp.tsx                       |  2 +-
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index ae980526..26825ca8 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -8,7 +8,9 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton";
 import { connectState } from "../../../redux/connector";
 import { WithDispatcher } from "../../../redux/reducers";
+import IconButton from "../../ui/IconButton";
 import TextArea from "../../ui/TextArea";
+import { Send } from '@styled-icons/feather';
 
 type Props = WithDispatcher & {
     channel: Channel;
@@ -70,15 +72,20 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
     }
 
     return (
-        <TextArea
-            value={draft}
-            onKeyDown={e => {
-                if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
-                    e.preventDefault();
-                    return send();
-                }
-            }}
-            onChange={e => setMessage(e.currentTarget.value)} />
+        <div style={{ display: 'flex' }}>
+            <TextArea
+                value={draft}
+                onKeyDown={e => {
+                    if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
+                        e.preventDefault();
+                        return send();
+                    }
+                }}
+                onChange={e => setMessage(e.currentTarget.value)} />
+            <IconButton onClick={send}>
+                <Send size={20} />
+            </IconButton>
+        </div>
     )
 }
 
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index 5bd4a856..ab74d14b 100644
--- a/src/pages/RevoltApp.tsx
+++ b/src/pages/RevoltApp.tsx
@@ -29,7 +29,7 @@ export default function App() {
     return (
         <OverlappingPanels
             width="100vw"
-            height="100%"
+            height="100vh"
             leftPanel={{ width: 292, component: <LeftSidebar /> }}
             rightPanel={{ width: 240, component: <RightSidebar /> }}
             docked={isTouchscreenDevice ? Docked.None : Docked.Left}>