Raise input on mobile when focusing

chat/src/App.css

@@ -120,7 +120,7 @@ body {
   }
 
   .App-content__reduced {
-    height: calc(var(--vh, 1vh) * 65);
+    height: calc(var(--vh, 1vh) * 45);
   }
 }
 

chat/src/App.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef } from "react";
-import { DndProvider, useDrop } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
 import cx from "classnames";
 import throttle from "lodash.throttle";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { DndProvider, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import "./App.css";
 import {
   ChatHeading,
   ChatMessageList,
@@ -12,7 +13,6 @@ import {
   UsersTyping,
 } from "./features";
 import { ChatProvider, DrawerProvider, useChat, useDrawer } from "./hooks";
-import "./App.css";
 
 const SCROLL_CANCEL_THRESHOLD = 500;
 const WINDOW_RESIZE_THROTTLE_WAIT = 250;
@@ -37,6 +37,8 @@ function AppInner() {
   const contentWrapper = useRef<HTMLDivElement>(null);
   const initiallyScrolledDown = useRef(false);
   const { messages, quote, userToDm, updateUserToDm } = useChat();
+  const [focused, setFocused] = useState(false);
+  const toggleFocus = useCallback(() => setFocused(prev => !prev), []);
 
   // See: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
   useEffect(() => {
@@ -99,7 +101,7 @@ function AppInner() {
         <div className="App-center">
           <div
             className={cx("App-content", {
-              "App-content__reduced": quote,
+              "App-content__reduced": quote || focused,
             })}
             ref={contentWrapper}
           >
@@ -139,7 +141,10 @@ function AppInner() {
                 </button>
               </div>
             )}
-            <UserInput />
+            <UserInput
+              onFocus={toggleFocus}
+              onBlur={toggleFocus}
+            />
             <UsersTyping />
           </div>
           <div className="App-bottom-dummy" />

chat/src/features/chat/UserInput.tsx

@@ -8,11 +8,16 @@ import React, {
   useState,
   useEffect,
 } from "react";
-import { useChat, useDrawer, useEmojis } from "../../hooks";
-import { EmojiDrawer, QuickEmojis } from "../emoji";
+import { useChat, useEmojis } from "../../hooks";
+import { QuickEmojis } from "../emoji";
 import "./UserInput.css";
 
-export function UserInput() {
+interface Props {
+  onFocus(): void;
+  onBlur(): void;
+}
+
+export function UserInput({ onFocus, onBlur }: Props) {
   const { draft, userToDm, sendMessage, updateDraft } = useChat();
   const builtChatInput = useRef<HTMLTextAreaElement>(null);
   const { visible, addQuery } = useEmojis();
@@ -67,7 +72,8 @@ export function UserInput() {
   );
   const handleFocus = useCallback(() => {
     builtChatInput.current?.scrollIntoView({ behavior: "smooth" });
-  }, []);
+    onFocus();
+  }, [onFocus]);
 
   // Listen for changes from the Emoji Modal and reflect them in draft
   useEffect(() => {
@@ -121,6 +127,7 @@ export function UserInput() {
         onChange={handleChange}
         onKeyUp={handleKeyUp}
         onFocus={handleFocus}
+        onBlur={onBlur}
         placeholder="Message"
         autoComplete="off"
         value={draft}