From 19e1c930ad7faacbd15c3aa050ac00f560ad05ed Mon Sep 17 00:00:00 2001
From: DilanRamirez <drramirezra@miners.utep.edu>
Date: Wed, 13 Oct 2021 13:13:07 -0600
Subject: [PATCH] hsitory chat height fixed

---
 client/src/components/chat/chat.tsx           |  8 ++---
 client/src/styles/history-chat-responsive.css | 31 +++++++++++++++++++
 cypress/cypress/integration/history.spec.ts   |  1 +
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/client/src/components/chat/chat.tsx b/client/src/components/chat/chat.tsx
index 4392c721..994519c5 100644
--- a/client/src/components/chat/chat.tsx
+++ b/client/src/components/chat/chat.tsx
@@ -65,12 +65,12 @@ const useStyles = makeStyles((theme) => ({
 const MENTOR_COLORS = ["#eaeaea", "#d4e8d9", "#ffebcf", "#f5cccd"];
 
 export function Chat(args: {
-  height: number;
+  height?: number;
   windowHeight?: number;
   width?: string;
   bubbleColor?: string;
 }): JSX.Element {
-  const { height, windowHeight, width, bubbleColor } = args;
+  const { width, bubbleColor } = args;
   const styles = useStyles();
   const {
     mentorType,
@@ -162,10 +162,10 @@ export function Chat(args: {
     >
       <List
         data-cy="chat-thread"
-        className={styles.list}
+        className={[styles.list, "chat-thread"].join(" ")}
         style={{
           width: shouldDisplayPortrait() ? "100%" : width ? width : "40vw",
-          height: shouldDisplayPortrait() || windowHeight ? height : "300px",
+          // height: shouldDisplayPortrait() || windowHeight ? height : "300px",
         }}
         disablePadding={true}
         id="chat-thread"
diff --git a/client/src/styles/history-chat-responsive.css b/client/src/styles/history-chat-responsive.css
index a1791065..1bf40dc3 100644
--- a/client/src/styles/history-chat-responsive.css
+++ b/client/src/styles/history-chat-responsive.css
@@ -36,3 +36,34 @@
     width: 100%;
   }
 }
+
+@media screen and (min-height: 1000px) {
+  .chat-thread {
+    height: 72vh;
+  }
+}
+@media screen and (min-height: 700px) {
+  .chat-thread {
+    height: 64vh;
+  }
+}
+@media screen and (min-height: 800px) {
+  .chat-thread {
+    height: 65vh;
+  }
+}
+@media screen and (min-height: 900px) {
+  .chat-thread {
+    height: 70vh;
+  }
+}
+@media screen and (min-height: 1400px) {
+  .chat-thread {
+    height: 72vh;
+  }
+}
+@media (min-width: 1650px) {
+  .chat-thread {
+    height: 73vh;
+  }
+}
diff --git a/cypress/cypress/integration/history.spec.ts b/cypress/cypress/integration/history.spec.ts
index 34cc66ca..3e04ac3f 100644
--- a/cypress/cypress/integration/history.spec.ts
+++ b/cypress/cypress/integration/history.spec.ts
@@ -30,6 +30,7 @@ describe("Chat History (Video Mentors)", () => {
 
   it("displays questions that have been asked via input", () => {
     visitAsGuestWithDefaultSetup(cy, "/");
+
     cy.get("[data-cy=header]").should("have.attr", "data-mentor", "clint");
     cy.get("[data-cy=history-tab]").trigger("mouseover").click();
     cy.get("[data-cy=input-field]").type("Hello");