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

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' />}