From eae9fb792c77a32c40f94a92c4e487aac682a981 Mon Sep 17 00:00:00 2001
From: Outrun Colors <itsoutruncolors@gmail.com>
Date: Sat, 24 Sep 2022 22:47:20 -0500
Subject: [PATCH] Reduce content size on mobile when quoting

---
 chat/package.json |  2 +-
 chat/src/App.css  |  4 ++++
 chat/src/App.tsx  | 10 ++++++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/chat/package.json b/chat/package.json
index f426a6756..b83d3f6b6 100644
--- a/chat/package.json
+++ b/chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chat",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {
diff --git a/chat/src/App.css b/chat/src/App.css
index c27e51281..83fa2025a 100644
--- a/chat/src/App.css
+++ b/chat/src/App.css
@@ -110,6 +110,10 @@ body {
     padding-right: 1rem;
     padding-left: 1rem;
   }
+
+  .App-content__reduced {
+    height: 58vh;
+  }
 }
 
 lite-youtube {
diff --git a/chat/src/App.tsx b/chat/src/App.tsx
index d4d774754..918c93a21 100644
--- a/chat/src/App.tsx
+++ b/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>
             ) : (