Tweak

chat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {

chat/src/App.tsx

@@ -142,6 +142,7 @@ function AppInner() {
               </div>
             )}
             <UserInput
+              large={focused}
               onFocus={toggleFocus}
               onBlur={toggleFocus}
             />

chat/src/features/chat/UserInput.css

@@ -4,9 +4,20 @@
   align-items: center;
 }
 
+@media screen and (max-width: 1100px) {
+  .UserInput-input__large {
+    min-height: 100px !important;
+    height: 100px !important;
+    max-height: 100px !important;
+  }
+}
+
 .UserInput-input {
   flex: 1;
   margin-right: 2rem;
+  min-height: 50px;
+  height: 50px;
+  max-height: 50px;
 }
 
 .UserInput-emoji {
@@ -14,4 +25,4 @@
   font-size: 20px;
   transform: rotateY(180deg);
   margin-right: 1rem;
-}
+}

chat/src/features/chat/UserInput.tsx

@@ -8,16 +8,18 @@ import React, {
   useState,
   useEffect,
 } from "react";
+import cx from "classnames";
 import { useChat, useEmojis } from "../../hooks";
 import { QuickEmojis } from "../emoji";
 import "./UserInput.css";
 
 interface Props {
+  large?: boolean;
   onFocus(): void;
   onBlur(): void;
 }
 
-export function UserInput({ onFocus, onBlur }: Props) {
+export function UserInput({ large = false, onFocus, onBlur }: Props) {
   const { draft, userToDm, sendMessage, updateDraft } = useChat();
   const builtChatInput = useRef<HTMLTextAreaElement>(null);
   const { visible, addQuery } = useEmojis();
@@ -115,12 +117,9 @@ export function UserInput({ onFocus, onBlur }: Props) {
       <textarea
         ref={builtChatInput}
         id="builtChatInput"
-        className="UserInput-input form-control"
+        className={cx("UserInput-input form-control", {
-        style={{
+          "UserInput-input__large": large
-          minHeight: 50,
+        })}
-          height: 50,
-          maxHeight: 50,
-        }}
         minLength={1}
         maxLength={1000}
         rows={1}