i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-12 02:58:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Modernize Input Field Scrollbar Design (#536) (#538)

Browse Source 
* Modernize Input Field Scrollbar Design #536

* Added Input Field Scrollbar Design #536

* The edit mode for the user scroller already looks good, so there’s no need to change it. The scrollbar-thin class only makes the scrollbar smaller compared to when it’s not present, so it isn’t needed.

---------

Co-authored-by: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>
This commit is contained in:
Vishakha Agrawal
2026-01-09 17:20:02 +05:30
committed by GitHub
parent 4cf9661adb
commit 32d1361ffa
4 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/globals.css
View File

@@ -244,6 +244,19 @@
.scrollbar-thin::-webkit-scrollbar-thumb:hover { .scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: oklch(0.75 0.01 260); background-color: oklch(0.75 0.01 260);
} }
/* Dark mode scrollbar */
.dark .scrollbar-thin {
scrollbar-color: oklch(0.35 0.015 260) transparent;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
background-color: oklch(0.35 0.015 260);
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: oklch(0.45 0.015 260);
}
} }
/* Smooth page transitions */ /* Smooth page transitions */

2
components/chat-input.tsx
View File

@@ -407,7 +407,7 @@ export function ChatInput({
placeholder={dict.chat.placeholder} placeholder={dict.chat.placeholder}
disabled={isDisabled} disabled={isDisabled}
aria-label="Chat input" aria-label="Chat input"
className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60" className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
/> />
<div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50"> <div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">

2
components/chat-message-display.tsx
View File

@@ -1114,7 +1114,7 @@ export function ChatMessageDisplay({
)} )}
</button> </button>
{isExpanded && ( {isExpanded && (
<div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30"> <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30 scrollbar-thin">
<pre className="text-xs whitespace-pre-wrap text-foreground/80"> <pre className="text-xs whitespace-pre-wrap text-foreground/80">
{ {
section.content section.content

2
components/history-dialog.tsx
View File

@@ -43,7 +43,7 @@ export function HistoryDialog({
return ( return (
<Dialog open={showHistory} onOpenChange={onToggleHistory}> <Dialog open={showHistory} onOpenChange={onToggleHistory}>
<DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto"> <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-thin">
<DialogHeader> <DialogHeader>
<DialogTitle>{dict.history.title}</DialogTitle> <DialogTitle>{dict.history.title}</DialogTitle>
<DialogDescription> <DialogDescription>