fix(layout): fix centered dropdown menu (#3133)

apps/readest-app/src/app/library/components/ImportMenu.tsx

@@ -39,9 +39,7 @@ const ImportMenu: React.FC<ImportMenuProps> = ({
 
   return (
     <Menu
-      className={clsx(
-        'dropdown-content dropdown-center bg-base-100 rounded-box z-[1] mt-3 p-2 shadow',
-      )}
+      className={clsx('dropdown-content bg-base-100 rounded-box !relative z-[1] mt-3 p-2 shadow')}
       onCancel={() => setIsDropdownOpen?.(false)}
     >
       <MenuItem

apps/readest-app/src/app/reader/components/HeaderBar.tsx

@@ -176,8 +176,8 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
                   ? _('Disable Quick Action')
                   : _('Enable Quick Action on Selection')
               }
-              className='exclude-title-bar-mousedown dropdown-bottom'
-              menuClassName='dropdown-center'
+              className='exclude-title-bar-mousedown dropdown-bottom dropdown-center'
+              menuClassName='!relative'
               buttonClassName={clsx(
                 'btn btn-ghost h-8 min-h-8 w-8 p-0',
                 viewSettings?.annotationQuickAction && 'bg-base-300/50',

apps/readest-app/src/app/reader/components/sidebar/Header.tsx

@@ -63,10 +63,10 @@ const SidebarHeader: React.FC<{
           label={_('Book Menu')}
           showTooltip={false}
           className={clsx(
-            window.innerWidth < 640 && 'dropdown-end',
-            'dropdown-bottom flex justify-center',
+            window.innerWidth < 640 ? 'dropdown-end' : 'dropdown-center',
+            'dropdown-bottom',
           )}
-          menuClassName={window.innerWidth < 640 ? 'no-triangle mt-1' : 'dropdown-center mt-3'}
+          menuClassName={clsx('no-triangle mt-1', window.innerWidth < 640 ? '' : '!relative')}
           buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
           containerClassName='h-8'
           toggleButton={<MdOutlineMenu className='fill-base-content' />}

apps/readest-app/src/components/Dropdown.tsx

@@ -117,7 +117,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   return (
     <div ref={containerRef} className={clsx('dropdown-container flex', containerClassName)}>
       {isOpen && <Overlay onDismiss={() => setIsDropdownOpen(false)} />}
-      <div className='relative'>
+      <div className='relative z-50'>
         <button
           aria-haspopup='menu'
           aria-expanded={isOpen}

apps/readest-app/src/styles/globals.css

@@ -204,6 +204,7 @@ foliate-fxl {
 }
 
 .dropdown-center {
+  position: absolute;
   left: 50%;
   transform: translateX(-50%);
 }