css multi browser fix trial 1

app/components/ConversationFrontend.tsx

@@ -53,7 +53,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
       if (isScrolling) {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
       }
-    }, [messages]);
+    }, [messages, isScrolling]);
 
     return (
       <div className="output" ref={ref}>

app/styles/global.css

@@ -4,6 +4,31 @@ body {
     position: relative;
 }
 
+/* Chrome, Edge, and Safari */
+::-webkit-scrollbar {
+    width: 12px;
+    /* Adjust width for horizontal and vertical scrollbars */
+}
+
+::-webkit-scrollbar-track {
+    background: #f0f0f0;
+    /* Background of the scrollbar track */
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #888;
+    /* Color of the draggable part (thumb) */
+    border-radius: 10px;
+    /* Rounded corners */
+    border: 2px solid #f0f0f0;
+    /* Space around the thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+    /* Thumb color on hover */
+}
+
 body {
     background-color: var(--background-color);
     color: var(--text-color);

app/styles/input.css

@@ -6,7 +6,6 @@
     padding-left: 0.5em;
     padding-right: 0;
     margin: 0 10px;
-    margin-bottom: 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -17,6 +16,7 @@
     bottom: 3dvh;
     right: 0.25vw;
     box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
+    z-index: 600;
 }
 
 .input input {

app/styles/models.css

@@ -6,7 +6,6 @@
     grid-column: 1/2;
     grid-row: 1/2;
     padding-bottom: 1px;
-    overflow: scroll;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
@@ -19,6 +18,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    overflow: hidden;
     overflow-y: scroll;
 }
 
@@ -53,7 +53,7 @@
     justify-content: center;
     color: var(--text-color); /* Use variable for text color */
     border-radius: 5%;
-    overflow: scroll;
+    overflow: hidden;
     position: relative;
     height: 18vh;
     width: 18vh;

app/styles/output.css

@@ -6,7 +6,7 @@
     background-color: var(--output-background-color);
     margin: 1em;
     margin-bottom: 0;
-    padding-bottom: 15dvh;
+    padding-bottom: 13dvh;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -73,7 +73,7 @@
     position: relative;
     display: inline-block;
     cursor: pointer;
-    z-index: 999;
+    z-index: 900;
 }
 
 .tooltip .tooltiptext {
@@ -87,7 +87,7 @@
 
     /* Position the tooltip */
     position: absolute;
-    top: 125%;
+    top: 100%;
     /* Adjusts tooltip to be below the button */
     left: 50%;
     transform: translateX(-50%);