Allow for custom scrollbar styling

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -51,3 +51,17 @@
   overflow-y: scroll;
   overflow-x: hidden;
 }
+
+.virtuoso::-webkit-scrollbar {
+  width: 5px;
+  height: auto;
+  background-color: var(--theme-color-components-chat-background);
+}
+
+.virtuoso::-webkit-scrollbar-thumb {
+  background: var(--theme-color-components-scrollbar-thumb);
+}
+
+.chatTextField {
+  border-top: 1px solid lightgray;
+}

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -192,7 +192,11 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   return (
     <div id="chat-container" className={styles.chatContainer}>
       {MessagesTable}
-      {showInput && <ChatTextField />}
+      {showInput && (
+        <div className={styles.chatTextField}>
+          <ChatTextField />
+        </div>
+      )}
     </div>
   );
 };

web/components/ui/Content/Content.module.scss

@@ -5,7 +5,7 @@
   grid-template-columns: 1fr auto;
   width: 100%;
   background-color: var(--theme-color-background-main);
-  
+
   @include screen(desktop) {
     height: var(--content-height);
   }
@@ -16,6 +16,16 @@
     flex-direction: column;
   }
 
+  .mainSection::-webkit-scrollbar {
+    width: 5px;
+    height: auto;
+    background-color: var(--theme-color-components-scrollbar-background);
+  }
+
+  .mainSection::-webkit-scrollbar-thumb {
+    background: var(--theme-color-components-scrollbar-thumb);
+  }
+
   .topSection {
     padding: 0;
     background-color: var(--theme-color-components-video-background);
@@ -45,4 +55,3 @@
   height: 100%;
   grid-template-rows: 1fr auto;
 }
-