chat scroll trial 2 / css tweaks

app/components/ConversationFrontend.tsx

@@ -16,14 +16,11 @@ interface ConversationProps {
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
   ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
 
-    useEffect(() => {
-      if (ref && typeof ref !== 'function') {
-        const element = ref as React.RefObject<HTMLDivElement>;
-        if (element.current) {
-          element.current.scrollTop = element.current.scrollHeight;
-        }
-      }
-    }, [messages, ref]);
+    const messagesEndRef = useRef<HTMLDivElement|null>(null)
+
+    useEffect(() => { 
+      messagesEndRef.current?.scrollIntoView()
+    },[messages])
 
     return (
       <div className="output" ref={ref}>
@@ -55,6 +52,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
             <p id="copiedText" style={{opacity:isClicked?"1":"0", transition:"all 0.3s ease-in-out"}}>Copied!</p>
           </div>
         </div>
+          <div ref={messagesEndRef} />
       </div>
     );
   }

app/styles/history.css

@@ -1,7 +1,7 @@
 .history-background {
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 40dvh;
+    height: 35dvh;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
@@ -40,6 +40,6 @@
 
 .history-models{
     position: relative;
-    height: 90dvh;
+    height: 86dvh;
     /* padding-bottom: 3dvh; */
 }

app/styles/output.css

@@ -4,6 +4,7 @@
     grid-row: 1 / 4;
     background-color: var(--output-background-color);
     margin: 1em;
+    margin-bottom: 0;
     padding-bottom: 14dvh;
     display: flex;
     flex-direction: column;
@@ -11,7 +12,7 @@
     font-size: 1em;
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
-    height: 90dvh;
+    height: 86dvh;
 }
 
 #conversation {

app/styles/responsive.css

@@ -73,29 +73,31 @@
   /* Input styles */
   .input {
     grid-column: 1 / -1;
-    gap: 10px;
+    gap: 5px;
     padding: 0.5em;
     margin: 0 auto;
     align-items: center;
-    width: 90%;
-    bottom: 10dvh
+    bottom: 3dvh;
+    right: 2vw;
+    left: 2vw;
+    justify-content: flex-start;
   }
 
   .input input {
     font-size: 1em; /* Adjust font size */
-    max-width: 65%;
+    max-width: 70%;
     margin-right: 0;
     border-color: var(--input-border-color); /* Use variable for input border */
     color: var(--text-color); /* Use variable for text color */
   }
 
   .input button {
-    height: 40px; /* Adjust button height */
-    width: 40px; /* Adjust button width */
+    height: 100%; /* Adjust button height */
+    width: 15%; /* Adjust button width */
     font-size: 1.2em; /* Adjust button font size */
-    margin: auto;
     background-color: var(--input-button-color); /* Use variable for button color */
     color: var(--user-message-text-color); /* Use variable for button text color */
+    margin: 0;
   }
 
   .header-logo{