From 8d5cf620ff3fcb6b1f4af2bc01e8ccbee18a8696 Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Wed, 2 Oct 2024 09:37:58 +0200
Subject: [PATCH] svg icons for even more everything

---
 app/components/ConversationFrontend.tsx | 6 ++++--
 app/styles/output.css                   | 7 ++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx
index 3c65bd4..832104b 100644
--- a/app/components/ConversationFrontend.tsx
+++ b/app/components/ConversationFrontend.tsx
@@ -53,7 +53,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
       if (isScrolling) {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
       }
-    }, [messages, isScrolling]);
+    }, [messages]);
 
     return (
       <div className="output" ref={ref}>
@@ -99,7 +99,9 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
           </div>
           <div className={"endOfMessages"} ref={messagesEndRef} style={{ height: "3px"}}/>
         </div>
-        <button id="scrollToBottom" disabled={isScrolling?true:false} style={{visibility: isScrolling?"hidden":"visible"}} onClick={()=> setIsScrolling(true)}>Down</button>
+        <button id="scrollToBottom" disabled={isScrolling ? true : false} style={{ visibility: isScrolling ? "hidden" : "visible" }} onClick={() => setIsScrolling(true)}>
+          <svg style={{fill:"var(--text-color)"}} viewBox="0 0 384 512" height={30}><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
+        </button>
       </div>
     );
   } 
diff --git a/app/styles/output.css b/app/styles/output.css
index ebaa2e3..2bd949d 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -6,14 +6,14 @@
     background-color: var(--output-background-color);
     margin: 1em;
     margin-bottom: 0;
-    padding-bottom: 14dvh;
+    padding-bottom: 15dvh;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     font-size: 1em;
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
-    height: 86dvh;
+    height: 85dvh;
     position: relative;
 }
 
@@ -22,7 +22,7 @@
     flex-direction: column;
     padding-left: 10px;
     overflow-y: auto;
-    height: 80vh;
+    height: 75dvh;
     background-color: var(--output-background-color);
     border-radius: 10px;
     scroll-behavior: smooth;
@@ -73,6 +73,7 @@
     position: relative;
     display: inline-block;
     cursor: pointer;
+    z-index: 999;
 }
 
 .tooltip .tooltiptext {