Skip to content

Commit b219b65

Browse files
sdcbsdcb
committed
refactor: replace 'custom-scrollbar' with 'scroller' for consistent styling across components
1 parent 5597613 commit b219b65

11 files changed

Lines changed: 39 additions & 28 deletions

File tree

‎src/FE/components/Chat/ChatHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ const ChatHeader = () => {
222222
<div className="relative flex w-full flex-grow flex-col rounded-md bg-card shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] overflow-hidden">
223223
<div
224224
className={cn(
225-
'flex justify-between select-none items-center custom-scrollbar overflow-x-auto px-3',
225+
'flex justify-between select-none items-center scroller overflow-x-auto px-3',
226226
)}
227227
>
228228
<div

‎src/FE/components/Chat/ChatModelSettingsModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ const ChatModelSettingModal = (props: Props) => {
248248
triggerClassName={
249249
'hover:bg-transparent px-4 border w-full h-10'
250250
}
251-
groupClassName="overflow-y-scroll max-h-80 sm:max-h-full custom-scrollbar"
251+
groupClassName="overflow-y-scroll max-h-80 sm:max-h-full scroller"
252252
models={models}
253253
content={
254254
<div className="flex gap-2 items-center">

‎src/FE/components/Chat/ChatPresetModal.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,7 @@ const ChatPresetModal = (props: Props) => {
458458
<ChatModelDropdownMenu
459459
className="p-0"
460460
triggerClassName={'hover:bg-transparent p-0 h-10'}
461-
groupClassName="overflow-y-scroll max-h-60 sm:max-h-full custom-scrollbar"
461+
groupClassName="overflow-y-scroll max-h-60 sm:max-h-full scroller"
462462
models={models}
463463
content={
464464
<Button
@@ -477,7 +477,7 @@ const ChatPresetModal = (props: Props) => {
477477
</div>
478478
) : (
479479
<>
480-
<div className="flex overflow-x-auto custom-scrollbar gap-2 items-center mt-4 mb-2 pb-2">
480+
<div className="scroller flex overflow-x-auto gap-2 items-center mt-4 mb-2 pb-2">
481481
{spans.map((span) => (
482482
<div
483483
key={'chat-preset-' + span.spanId}
@@ -498,7 +498,7 @@ const ChatPresetModal = (props: Props) => {
498498
<ChatModelDropdownMenu
499499
className="p-0"
500500
triggerClassName={'hover:bg-transparent p-0 h-10'}
501-
groupClassName="overflow-y-scroll max-h-60 sm:max-h-full custom-scrollbar"
501+
groupClassName="overflow-y-scroll max-h-60 sm:max-h-full scroller"
502502
models={models}
503503
content={
504504
<Button variant="ghost" className="bg-muted">
@@ -522,7 +522,7 @@ const ChatPresetModal = (props: Props) => {
522522
triggerClassName={
523523
'hover:bg-transparent px-2 border w-full h-10'
524524
}
525-
groupClassName="overflow-y-scroll max-h-60 sm:max-h-full custom-scrollbar"
525+
groupClassName="overflow-y-scroll max-h-60 sm:max-h-full scroller"
526526
models={models}
527527
content={
528528
<div className="flex gap-2 items-center">

‎src/FE/components/ChatModelDropdownMenu/ChatModelDropdownMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ const ChatModelDropdownMenu = forwardRef<HTMLButtonElement, {
149149
</DropdownMenuSubTrigger>
150150
<DropdownMenuPortal>
151151
<DropdownMenuSubContent
152-
className="max-h-96 overflow-y-auto custom-scrollbar max-w-[64px] md:max-w-[256px]"
152+
className="max-h-96 overflow-y-auto scroller max-w-[64px] md:max-w-[256px]"
153153
onClick={(e) => e.stopPropagation()}
154154
>
155155
{m.child.map((x) => {

‎src/FE/components/admin/ModelKeys/QuickAddModelModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ const QuickAddModelModal = (props: IProps) => {
233233
/>
234234
</div>
235235
</DialogHeader>
236-
<div className="min-h-0 max-h-[65vh] overflow-y-auto pr-2 custom-scrollbar">
236+
<div className="scroller min-h-0 max-h-[65vh] overflow-y-auto pr-2">
237237
{error ? (
238238
<div className="flex items-center justify-center w-full h-full text-muted-foreground">
239239
<div className="text-center max-w-2xl">

‎src/FE/components/admin/Users/UserInitialConfigModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ const UserInitialConfigModal = (props: IProps) => {
338338
</span>
339339
</DropdownMenuSubTrigger>
340340
<DropdownMenuPortal>
341-
<DropdownMenuSubContent className="max-h-96 overflow-y-auto custom-scrollbar max-w-[64px] md:max-w-[256px]">
341+
<DropdownMenuSubContent className="max-h-96 overflow-y-auto scroller max-w-[64px] md:max-w-[256px]">
342342
{providerModels.map((model) => (
343343
<DropdownMenuItem
344344
key={model.modelId}

‎src/FE/components/admin/request-trace/RequestTraceCompareDialog.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -242,15 +242,15 @@ export default function RequestTraceCompareDialog({
242242
</div>
243243

244244
{loading ? (
245-
<div className="custom-scrollbar min-h-0 h-full overflow-y-auto pr-1">
245+
<div className="scroller min-h-0 h-full overflow-y-auto pr-1">
246246
<div className="space-y-2 py-4">
247247
{Array.from({ length: 6 }).map((_, idx) => (
248248
<Skeleton key={idx} className="h-8 w-full" />
249249
))}
250250
</div>
251251
</div>
252252
) : (
253-
<div className="custom-scrollbar min-h-0 h-full overflow-x-auto overflow-y-scroll pr-1">
253+
<div className="scroller min-h-0 h-full overflow-x-auto overflow-y-scroll pr-1">
254254
<div className="space-y-2">
255255
{rows.map((row) => {
256256
const different = row.a !== row.b;
@@ -299,4 +299,4 @@ export default function RequestTraceCompareDialog({
299299
</DialogContent>
300300
</Dialog>
301301
);
302-
}
302+
}

‎src/FE/components/admin/request-trace/RequestTraceDetailsDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export default function RequestTraceDetailsDialog({
122122
)}
123123

124124
{hasContent ? (
125-
<pre className="custom-scrollbar h-full overflow-x-auto overflow-y-auto whitespace-pre-wrap break-all p-3 text-xs font-mono">{text}</pre>
125+
<pre className="scroller h-full overflow-x-auto overflow-y-auto whitespace-pre-wrap break-all p-3 text-xs font-mono">{text}</pre>
126126
) : (
127127
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
128128
{t('No data')}
@@ -148,7 +148,7 @@ export default function RequestTraceDetailsDialog({
148148
))}
149149
</div>
150150
) : (
151-
<div className="custom-scrollbar space-y-4 overflow-x-hidden overflow-y-auto">
151+
<div className="scroller space-y-4 overflow-x-hidden overflow-y-auto">
152152
<div
153153
className="group relative rounded-md border bg-muted/20 p-3 text-sm"
154154
onClick={() => setActiveCopyArea('url')}

‎src/FE/components/ui/table.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ import { cn } from '@/lib/utils';
99

1010
const Table = React.forwardRef<
1111
HTMLTableElement,
12-
React.HTMLAttributes<HTMLTableElement>
13-
>(({ className, ...props }, ref) => (
14-
<div className="relative w-full overflow-auto">
12+
React.HTMLAttributes<HTMLTableElement> & {
13+
containerClassName?: string;
14+
}
15+
>(({ className, containerClassName, ...props }, ref) => (
16+
<div className={cn('relative w-full overflow-auto', containerClassName)}>
1517
<table
1618
ref={ref}
1719
className={cn('w-full caption-bottom text-sm', className)}

‎src/FE/pages/globals.css‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -125,21 +125,30 @@ html {
125125
display: none;
126126
}
127127

128-
.custom-scrollbar::-webkit-scrollbar {
128+
.scroller {
129+
scrollbar-width: thin;
130+
scrollbar-color: hsl(var(--muted-foreground) / 0.45) transparent;
131+
}
132+
133+
.scroller::-webkit-scrollbar {
129134
background-color: var(--scrollbar);
130135
border-radius : 10px;
131-
width : 6px;
132-
height : 6px;
136+
width : 8px;
137+
height : 8px;
133138
}
134139

135-
.custom-scrollbar::-webkit-scrollbar-track {
140+
.scroller::-webkit-scrollbar-track {
136141
border-radius: 10px;
137-
background : var(--scrollbar);
142+
background : transparent;
138143
}
139144

140-
.custom-scrollbar::-webkit-scrollbar-thumb {
141-
border-radius: 10px;
142-
background : hsl(var(--muted));
145+
.scroller::-webkit-scrollbar-thumb {
146+
border-radius: 9999px;
147+
background: hsl(var(--muted-foreground) / 0.35);
148+
}
149+
150+
.scroller::-webkit-scrollbar-thumb:hover {
151+
background: hsl(var(--muted-foreground) / 0.55);
143152
}
144153

145154
@layer utilities {

0 commit comments

Comments
 (0)