Quocthinhvo/main (#52)

* Change scroll bar style in desktop

* new scrollbar

---------

Co-authored-by: Quốc Thịnh Võ <46624702+quocthinhvo@users.noreply.github.com>
This commit is contained in:
Mckay Wrigley 2023-03-21 16:25:42 -06:00 committed by GitHub
parent 5b6968a6be
commit cb0fb447a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 1 deletions

View File

@ -63,6 +63,7 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model }) => {
if (textareaRef && textareaRef.current) { if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = "inherit"; textareaRef.current.style.height = "inherit";
textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`; textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
textareaRef.current.style.overflow = `${textareaRef?.current?.scrollHeight > 400 ? "auto" : "hidden"}`;
} }
}, [content]); }, [content]);
@ -75,7 +76,7 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model }) => {
resize: "none", resize: "none",
bottom: `${textareaRef?.current?.scrollHeight}px`, bottom: `${textareaRef?.current?.scrollHeight}px`,
maxHeight: "400px", maxHeight: "400px",
overflow: "auto" overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400 ? "auto" : "hidden"}`
}} }}
placeholder="Type a message..." placeholder="Type a message..."
value={content} value={content}

View File

@ -1,3 +1,29 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @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;
}