normalize styles

This commit is contained in:
Pavel
2026-02-09 22:18:04 +03:00
parent cb6b3aa406
commit 848e9a62f6
6 changed files with 36 additions and 34 deletions

View File

@@ -394,7 +394,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
</NavLink>
<div
id="conversationsMainDiv"
className="mb-auto h-[78vh] overflow-x-hidden overflow-y-auto dark:text-white"
className="mb-auto h-[78vh] overflow-x-hidden overflow-y-auto scrollbar-thin dark:text-white"
>
{conversations?.loading && !isDeletingConversation && (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">

View File

@@ -212,7 +212,7 @@ export default function MultiSelectPopup({
<div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
</div>
) : (
<div className="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-gray-200 dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
<div className="h-full overflow-y-auto scrollbar-thin">
{filteredOptions.length === 0 ? (
<div className="flex h-full flex-col items-center justify-center px-4 py-8 text-center">
<img

View File

@@ -139,7 +139,7 @@ export default function SourcesPopup({
/>
</div>
<div className="dark:border-dim-gray mx-4 grow overflow-y-auto rounded-md border border-[#D9D9D9] [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
<div className="dark:border-dim-gray mx-4 grow overflow-y-auto rounded-md border border-[#D9D9D9] scrollbar-thin">
{options ? (
<>
{filteredOptions?.map((option: any, index: number) => {

View File

@@ -175,7 +175,7 @@ export default function ToolsPopup({
</div>
) : (
<div className="dark:border-dim-gray mx-4 grow overflow-hidden rounded-md border border-[#D9D9D9]">
<div className="h-full overflow-y-auto [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
<div className="h-full overflow-y-auto scrollbar-thin">
{filteredTools.length === 0 ? (
<div className="flex h-full flex-col items-center justify-center py-8">
<img

View File

@@ -455,7 +455,6 @@ const ConversationBubble = forwardRef<
customStyle={{
margin: 0,
borderRadius: 0,
scrollbarWidth: 'thin',
}}
>
{String(children).replace(/\n$/, '')}
@@ -645,7 +644,7 @@ function AllSources(sources: AllSourcesProps) {
<p className="text-left text-xl">{`${sources.sources.length} ${t('conversation.sources.title')}`}</p>
<div className="mx-1 mt-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%]"></div>
</div>
<div className="scrollbar-thin mt-6 flex h-[90%] w-52 flex-col gap-4 overflow-y-auto pr-3 sm:w-64">
<div className="mt-6 flex h-[90%] w-52 flex-col gap-4 overflow-y-auto pr-3 sm:w-64">
{sources.sources.map((source, index) => {
const isExternalSource = source.link && source.link !== 'local';
return (
@@ -866,7 +865,6 @@ function Thought({
customStyle={{
margin: 0,
borderRadius: 0,
scrollbarWidth: 'thin',
}}
>
{String(children).replace(/\n$/, '')}

View File

@@ -108,7 +108,6 @@ layer(base);
}
@utility scrollbar-thin {
/* Thin scrollbar utility */
&::-webkit-scrollbar {
width: 6px;
height: 6px;
@@ -120,31 +119,29 @@ layer(base);
/* Light theme scrollbar */
&::-webkit-scrollbar-thumb {
background: rgba(215, 215, 215, 1);
border-radius: 3px;
background: #E2E8F0;
border-radius: 9999px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(195, 195, 195, 1);
background: #8C9198;
}
/* Dark theme scrollbar */
.dark &::-webkit-scrollbar-thumb {
background: rgba(77, 78, 88, 1);
border-radius: 3px;
background: #CFCFCF;
border-radius: 9999px;
}
.dark &::-webkit-scrollbar-thumb:hover {
background: rgba(97, 98, 108, 1);
background: #F0F0F0;
}
/* For Firefox - Light theme */
scrollbar-width: thin;
scrollbar-color: rgba(215, 215, 215, 1) transparent;
scrollbar-color: #E2E8F0 transparent;
/* For Firefox - Dark theme */
.dark & {
scrollbar-color: rgba(77, 78, 88, 1) transparent;
scrollbar-color: #CFCFCF transparent;
}
}
@@ -175,16 +172,25 @@ layer(base);
min-width: 150px;
max-width: 320px;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: grey transparent;
}
& td {
min-width: 150px;
max-width: 320px;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: grey transparent;
}
@supports (-moz-appearance: none) {
& th,
& td {
scrollbar-width: thin;
scrollbar-color: #E2E8F0 transparent;
}
.dark & th,
.dark & td {
scrollbar-color: #CFCFCF transparent;
}
}
}
@@ -204,23 +210,24 @@ layer(base);
background-color: #202124; /* raisin-black */
}
::-webkit-scrollbar {
width: 8px;
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
.dark ::-webkit-scrollbar-track {
background: #2f3036;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 40px;
background: #E2E8F0;
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
background: #8C9198;
}
.dark ::-webkit-scrollbar-thumb {
background: #CFCFCF;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #b1afaf;
background: #F0F0F0;
}
}
@@ -635,9 +642,6 @@ Avoid over-scrolling in mobile browsers
src: url('/fonts/IBMPlexMono-Medium.ttf');
}
::-webkit-scrollbar {
width: 10;
}
/* Light mode specific autofill styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,