fix design bug header:

src/components/topbar/TopBar.tsx

@@ -107,7 +107,7 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                         active={profileDropState}
                         toggle={toggleProfileDropState}
                     >
-                        <div className='place-items-center pt-8'>
+                        <div className='place-items-center flex flex-col items-center justify-center pt-8'>
                             <Image
                                 src={'/assets/images/avatar.svg'}
                                 width={56}

src/components/utils/Dropdown.tsx

@@ -40,16 +40,21 @@ function Dropdown({ active, toggle, children, ...rest }: DropdownProps) {
             transition={{ duration: 0.1 }}
             className={clsx(
                 'box-shadow-normal',
-                'fixed inset-0 bg-container rounded-normal z-50',
+                'fixed inset-x-0 bottom-0 bg-container rounded-normal z-50',
                 'xl:absolute xl:top-18 xl:left-3 xl:right-auto xl:h-screen xl:w-[300px]',
                 active === false && 'pointer-events-none'
             )}
+            style={{
+                top: 'calc(0px - env(safe-area-inset-top))',
+                paddingTop: 'calc(env(safe-area-inset-top) + 0px)',
+                minHeight: 'calc(100vh + env(safe-area-inset-top))'
+            }}
             {...rest}
         >
             <div className='relative w-full h-full'>
-                <button 
+                <button
                     ref={closeButtonRef}
-                    className='xl:hidden' 
+                    className='xl:hidden'
                     onClick={toggle} >
                     <CloseCircle size={20} className='cursor-pointer stroke-foreground absolute left-6 top-6' />
                 </button>