diff --git a/chat/package.json b/chat/package.json
index 5dc95c3d3c..20867891bb 100644
--- a/chat/package.json
+++ b/chat/package.json
@@ -1,6 +1,6 @@
{
"name": "chat",
- "version": "0.1.23",
+ "version": "0.1.24",
"main": "./src/index.tsx",
"license": "MIT",
"dependencies": {
diff --git a/chat/src/App.tsx b/chat/src/App.tsx
index dd6ee2791f..11347116c9 100644
--- a/chat/src/App.tsx
+++ b/chat/src/App.tsx
@@ -142,6 +142,7 @@ function AppInner() {
)}
diff --git a/chat/src/features/chat/UserInput.css b/chat/src/features/chat/UserInput.css
index 6b479592a9..d6791a7773 100644
--- a/chat/src/features/chat/UserInput.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/chat/src/features/chat/UserInput.tsx b/chat/src/features/chat/UserInput.tsx
index 0ccf50c5a0..59d0d5da3a 100644
--- a/chat/src/features/chat/UserInput.tsx
+++ b/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(null);
const { visible, addQuery } = useEmojis();
@@ -115,12 +117,9 @@ export function UserInput({ onFocus, onBlur }: Props) {