fix: dialog movement (#227)

* fix: dialog movement * chore: lint
Longhorn-Developers · Jun 4, 2024 · bc5d68c · bc5d68c
1 parent 863d980
commit bc5d68c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 34 deletions.
diff --git a/src/views/components/common/Dialog.tsx b/src/views/components/common/Dialog.tsx
@@ -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);
+    }
 }
diff --git a/src/views/components/common/LogoIcon.tsx b/src/views/components/common/LogoIcon.tsx
@@ -28,7 +28,7 @@ export function SmallLogo({ className }: { className?: string }): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>
             <LogoIcon />
-            <div className='flex flex-col text-lg font-medium leading-[1em] mt-1'>
+            <div className='mt-1 flex flex-col text-lg font-medium leading-[1em]'>
                 <p className='text-nowrap text-ut-burntorange'>UT Registration</p>
                 <p className='text-ut-burntorange'>
                     Plus{' '}
@@ -51,7 +51,7 @@ export function LargeLogo({ className }: { className?: string }): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>
             <LogoIcon className='h-12 w-12' />
-            <div className='hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex screenshot:flex mt-1'>
+            <div className='mt-1 hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex screenshot:flex'>
                 <p className='text-nowrap text-ut-burntorange'>UT Registration</p>
                 <p className='text-ut-burntorange'>
                     Plus{' '}