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:
parent
5b6968a6be
commit
cb0fb447a7
|
@ -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}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue