fix: dialog movement

Longhorn-Developers · Jun 3, 2024 · 28521b5 · 28521b5
1 parent 863d980
commit 28521b5
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/src/views/components/common/Dialog.tsx b/src/views/components/common/Dialog.tsx
@@ -1,9 +1,9 @@
 import type { TransitionRootProps } from '@headlessui/react';
 import {
     Description,
-    Dialog as HDialog,
     DialogPanel,
     DialogTitle,
+    Dialog as HDialog,
     Transition,
     TransitionChild,
 } from '@headlessui/react';
@@ -44,28 +44,28 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
                 >
                     <div className={clsx('fixed inset-0 z-50 bg-slate-700/35')} />
                 </TransitionChild>
-                <TransitionChild
-                    as={Fragment}
-                    enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
-                    enterFrom='transform-gpu scale-95 opacity-0'
-                    enterTo='transform-gpu scale-100 opacity-100'
-                    leave='transition duration-250 motion-reduce:duration-0 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
-                    leaveFrom='transform-gpu scale-100 opacity-100'
-                    leaveTo='transform-gpu scale-95 opacity-0'
-                >
-                    <div className='fixed inset-0 z-50 flex items-center justify-center'>
+                <div className='fixed inset-0 z-50 flex items-center justify-center'>
+                    <TransitionChild
+                        as={Fragment}
+                        enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
+                        enterFrom='transform-gpu scale-95 opacity-0'
+                        enterTo='transform-gpu scale-100 opacity-100'
+                        leave='transition duration-250 motion-reduce:duration-0 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
+                        leaveFrom='transform-gpu scale-100 opacity-100'
+                        leaveTo='transform-gpu scale-95 opacity-0'
+                    >
                         <DialogPanel
                             className={clsx(
-                                'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%)] mt-[calc(100vw-100%)]',
+                                'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%)]',
                                 className
                             )}
                         >
                             {props.title && <DialogTitle as={Fragment}>{props.title}</DialogTitle>}
                             {props.description && <Description as={Fragment}>{props.description}</Description>}
                             {children}
                         </DialogPanel>
-                    </div>
-                </TransitionChild>
+                    </TransitionChild>
+                </div>
             </ExtensionRoot>
         </Transition>
     );

diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
@@ -17,25 +17,25 @@
     [data-rfd-drag-handle-context-id=':r1:'] {
         cursor: move;
     }
-}
 
-::-webkit-scrollbar {
-    width: 14px;
-    height: 14px;
-    background: transparent;
-}
-::-webkit-scrollbar-thumb {
-    border: 3px solid #fff;
-    border-radius: 7px;
-    min-height: 40px;
-    box-shadow: none;
-    background: rgb(218, 220, 224);
-}
-:hover::-webkit-scrollbar-thumb,
-::-webkit-scrollbar-thumb:hover {
-    background: rgb(189, 193, 198);
-}
+    ::-webkit-scrollbar {
+        width: 14px;
+        height: 14px;
+        background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+        border: 3px solid #fff;
+        border-radius: 7px;
+        min-height: 40px;
+        box-shadow: none;
+        background: rgb(218, 220, 224);
+    }
+    :hover::-webkit-scrollbar-thumb,
+    ::-webkit-scrollbar-thumb:hover {
+        background: rgb(189, 193, 198);
+    }
 
-::-webkit-scrollbar-thumb:active {
-    background: rgb(128, 134, 139);
+    ::-webkit-scrollbar-thumb:active {
+        background: rgb(128, 134, 139);
+    }
 }