🚀 Fix scroll bar styling

This commit is contained in:
Asim Shrestha
2023-04-07 18:44:52 -07:00
parent 8ba3b0a21c
commit df6d0f07ec
2 changed files with 30 additions and 2 deletions

View File

@@ -11,12 +11,12 @@ const ChatWindow = ({ children, className }: ChatWindowProps) => {
return (
<div
className={
"border-translucent flex h-full w-full flex-col rounded-3xl border-2 border-white/20 bg-zinc-900 text-white shadow-2xl drop-shadow-lg " +
"border-translucent flex h-full max-h-full w-full flex-col rounded-3xl border-2 border-white/20 bg-zinc-900 text-white shadow-2xl drop-shadow-lg " +
className
}
>
<MacWindowHeader />
<div className="overflow-y-scroll">{children}</div>
<div className="mb-3 mr-3 max-h-[100%] overflow-y-auto">{children}</div>
</div>
);
};

View File

@@ -6,4 +6,32 @@
background-image: radial-gradient(circle, rgba(58, 58, 58, 0.75) 2px, transparent 0px);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */
/* total width */
div::-webkit-scrollbar {
border-radius: 16px;
background-color: #464649;
width: 16px;
}
/* background of the scrollbar except button or resizer */
div::-webkit-scrollbar-track {
border-radius: 16px;
background-color: #464649;
}
/* scrollbar itself */
div::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
border: 2px solid #464649;
}
/* set button(top and bottom of the scrollbar) */
div::-webkit-scrollbar-button {
display: none;
}