dka/LibreChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🖌️ 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
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="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
files={files}
setFiles={setFiles}

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

@@ -14,7 +14,10 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<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>
<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',
'dark:bg-slate-900',
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 ?? '',
)}