Quocthinhvo/main (mckaywrigley#52)

* Change scroll bar style in desktop * new scrollbar --------- Co-authored-by: Quốc Thịnh Võ <[email protected]>
dylanbud · Mar 21, 2023 · cb0fb44 · cb0fb44
1 parent 5b6968a
commit cb0fb44
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
@@ -63,6 +63,7 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model }) => {
     if (textareaRef && textareaRef.current) {
       textareaRef.current.style.height = "inherit";
       textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
+      textareaRef.current.style.overflow = `${textareaRef?.current?.scrollHeight > 400 ? "auto" : "hidden"}`;
     }
   }, [content]);
 
@@ -75,7 +76,7 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model }) => {
           resize: "none",
           bottom: `${textareaRef?.current?.scrollHeight}px`,
           maxHeight: "400px",
-          overflow: "auto"
+          overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400 ? "auto" : "hidden"}`
         }}
         placeholder="Type a message..."
         value={content}

diff --git a/styles/globals.css b/styles/globals.css
@@ -1,3 +1,29 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #aaa;
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: #f2f2f2;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}