Reduce content size on mobile when quoting

chat/package.json

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

chat/src/App.css

@@ -110,6 +110,10 @@ body {
     padding-right: 1rem;
     padding-left: 1rem;
   }
+
+  .App-content__reduced {
+    height: 58vh;
+  }
 }
 
 lite-youtube {

chat/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { DndProvider, useDrop } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
+import cx from "classnames";
 import {
   ChatHeading,
   ChatMessageList,
@@ -58,7 +59,7 @@ function AppInner() {
       contentWrapper.current.scrollTop = contentWrapper.current.scrollHeight;
     }
   }, [messages]);
-  
+
   useEffect(() => {
     if (!open) {
       // Scroll to the bottom after any drawer closes.
@@ -74,7 +75,12 @@ function AppInner() {
           <ChatHeading />
         </div>
         <div className="App-center">
-          <div className="App-content" ref={contentWrapper}>
+          <div
+            className={cx("App-content", {
+              "App-content__reduced": quote,
+            })}
+            ref={contentWrapper}
+          >
             {open ? (
               <div className="App-drawer">{config.content}</div>
             ) : (