Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 01:10:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🖌️ style: update dialog position (#1999)

Browse source 
* style(ChatForm): update styling and fixed style bug

* style:(Dialog): reduced max height  style(Settings): fixed dialog position height

* style(Settings): fixed large screen  position
This commit is contained in:
Marco Beretta 2024-03-06 23:03:23 +01:00 • committed by GitHub
parent ab263c7a50
commit b2ab6fd19d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 6 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -43,7 +43,7 @@ export default function ChatForm({ index = 0 }) {
> >
<div className="relative flex h-full flex-1 items-stretch md:flex-col"> <div className="relative flex h-full flex-1 items-stretch md:flex-col">
<div className="flex w-full items-center"> <div className="flex w-full items-center">
<div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(23,23,23,1)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,0.1)]"> <div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(33,33,33,1)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,0.3)]">
<FileRow <FileRow
files={files} files={files}
setFiles={setFiles} setFiles={setFiles}

5
client/src/components/Nav/Settings.tsx
View file

@ -14,7 +14,10 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent <DialogContent
className={cn('shadow-2xl dark:bg-gray-800 dark:text-white md:min-h-[373px] md:w-[680px]')} className={cn(
'shadow-2xl dark:bg-gray-800 dark:text-white md:min-h-[373px] md:w-[680px]',
isSmallScreen ? 'top-44 -translate-y-0' : '',
)}
> >
<DialogHeader> <DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200"> <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">

2
client/src/components/ui/Dialog.tsx
View file

@ -52,7 +52,7 @@ const DialogContent = React.forwardRef<
'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg', 'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg',
'dark:bg-slate-900', 'dark:bg-slate-900',
isSmallScreen isSmallScreen
? 'fixed left-1/2 top-24 z-[999] m-auto grid w-11/12 -translate-x-1/2 gap-4 rounded-xl bg-white pb-6' ? 'fixed left-1/2 top-1/2 z-[999] m-auto grid w-11/12 -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-white pb-6'
: '', : '',
className ?? '', className ?? '',
)} )}