fix(layout): fix z index for dropdown (#3135)

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

@@ -361,10 +361,10 @@ const SearchBar: React.FC<SearchBarProps> = ({ isVisible, bookKey, onHideSearchB
           <Dropdown
             label={_('Search Options')}
             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.5'}
+            menuClassName={clsx('no-triangle mt-1', window.innerWidth < 640 ? '' : '!relative')}
             buttonClassName={clsx(
               'btn btn-ghost h-8 min-h-8 w-8 p-0 rounded-none rounded-r-lg',
               viewSettings?.isEink ? '!bg-transparent hover:!bg-transparent' : '',

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

@@ -49,7 +49,7 @@ const SearchOptions: React.FC<SearchOptionsProps> = ({
   return (
     <div
       className={clsx(
-        'search-options dropdown-content dropdown-center border-base-200 z-20 w-56 border shadow-2xl',
+        'search-options dropdown-content border-base-200 z-20 w-56 border shadow-2xl',
         isEink ? 'bordercolor-content border-base-content !bg-base-100 border' : '',
         menuClassName,
       )}

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 z-50'>
+      <div className={clsx('relative', isOpen && 'z-50')}>
         <button
           aria-haspopup='menu'
           aria-expanded={isOpen}

apps/readest-app/src/hooks/useSync.ts

@@ -140,7 +140,7 @@ export function useSync(bookKey?: string) {
           }
           break;
       }
-      return records?.length || 0;
+      return records?.filter((rec) => !rec.deleted_at).length || 0;
     } catch (err: unknown) {
       console.error(err);
       if (err instanceof Error) {