fix(layout): fix aligment of options in settings menu, closes #3151 (#3163)

apps/readest-app/src/components/settings/DialogMenu.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { useCustomFontStore } from '@/store/customFontStore';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { SettingsPanelType } from './SettingsDialog';
+import Menu from '@/components/Menu';
 import MenuItem from '@/components/MenuItem';
 
 interface DialogMenuProps {
@@ -54,12 +55,7 @@ const DialogMenu: React.FC<DialogMenuProps> = ({
   };
 
   return (
-    <div
-      className={clsx(
-        'dropdown-content dropdown-right no-triangle border-base-200 z-20 mt-1 border shadow-2xl',
-        'text-base sm:text-sm',
-      )}
-    >
+    <Menu className={clsx('dialog-menu dropdown-content no-triangle z-20 mt-2 shadow-2xl')}>
       <MenuItem
         label={_('Global Settings')}
         tooltip={isSettingsGlobal ? _('Apply to All Books') : _('Apply to This Book')}
@@ -74,7 +70,7 @@ const DialogMenu: React.FC<DialogMenuProps> = ({
           <MenuItem label={_('Manage Custom Fonts')} onClick={handleManageCustomFont} />
         </>
       )}
-    </div>
+    </Menu>
   );
 };
 

apps/readest-app/src/components/settings/SettingsDialog.tsx

@@ -239,6 +239,40 @@ const SettingsDialog: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   const currentPanel = tabConfig.find((tab) => tab.tab === activePanel);
 
+  const windowControls = (
+    <div className='flex h-full items-center justify-end gap-x-2'>
+      <button
+        onClick={handleOpenCommandPalette}
+        aria-label={_('Search Settings')}
+        title={`${_('Search Settings')} (${getCommandPaletteShortcut()})`}
+        className='btn btn-ghost flex h-8 min-h-8 w-8 items-center justify-center p-0'
+      >
+        <FiSearch />
+      </button>
+      <Dropdown
+        label={_('Settings Menu')}
+        className='dropdown-bottom dropdown-end'
+        buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0 flex items-center justify-center'
+        toggleButton={<PiDotsThreeVerticalBold />}
+      >
+        <DialogMenu
+          activePanel={activePanel}
+          onReset={handleResetCurrentPanel}
+          resetLabel={
+            currentPanel ? _('Reset {{settings}}', { settings: currentPanel.label }) : undefined
+          }
+        />
+      </Dropdown>
+      <button
+        onClick={handleClose}
+        aria-label={_('Close')}
+        className={'bg-base-300/65 btn btn-ghost btn-circle hidden h-6 min-h-6 w-6 p-0 sm:flex'}
+      >
+        <MdClose size={closeIconSize} />
+      </button>
+    </div>
+  );
+
   return (
     <Dialog
       isOpen={true}
@@ -252,20 +286,23 @@ const SettingsDialog: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       snapHeight={appService?.isMobile ? 0.7 : undefined}
       header={
         <div className='flex w-full flex-col items-center'>
-          <div className='tab-title flex pb-2 text-base font-semibold sm:hidden'>
-            {currentPanel?.label || ''}
-          </div>
-          <div className='flex w-full flex-row items-center justify-between'>
+          <div className='flex w-full items-center justify-center pb-2 sm:hidden'>
             <button
               tabIndex={-1}
               aria-label={_('Close')}
               onClick={handleClose}
               className={
-                'btn btn-ghost btn-circle flex h-8 min-h-8 w-8 hover:bg-transparent focus:outline-none sm:hidden'
+                'btn btn-ghost btn-circle absolute left-3 flex h-8 min-h-8 w-8 hover:bg-transparent focus:outline-none'
               }
             >
               {isRtl ? <MdArrowForwardIos /> : <MdArrowBackIosNew />}
             </button>
+            <div className='tab-title flex text-base font-semibold'>
+              {currentPanel?.label || ''}
+            </div>
+            <div className='absolute right-3'>{windowControls}</div>
+          </div>
+          <div className='flex w-full flex-row items-center justify-between'>
             <div
               ref={tabsRef}
               role='group'
@@ -301,41 +338,7 @@ const SettingsDialog: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                   </button>
                 ))}
             </div>
-            <div className='flex h-full items-center justify-end gap-x-2'>
-              <button
-                onClick={handleOpenCommandPalette}
-                aria-label={_('Search Settings')}
-                title={`${_('Search Settings')} (${getCommandPaletteShortcut()})`}
-                className='btn btn-ghost hidden h-8 min-h-8 w-8 items-center justify-center p-0 sm:flex'
-              >
-                <FiSearch />
-              </button>
-              <Dropdown
-                label={_('Settings Menu')}
-                className='dropdown-bottom dropdown-end'
-                buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0 flex items-center justify-center'
-                toggleButton={<PiDotsThreeVerticalBold />}
-              >
-                <DialogMenu
-                  activePanel={activePanel}
-                  onReset={handleResetCurrentPanel}
-                  resetLabel={
-                    currentPanel
-                      ? _('Reset {{settings}}', { settings: currentPanel.label })
-                      : undefined
-                  }
-                />
-              </Dropdown>
-              <button
-                onClick={handleClose}
-                aria-label={_('Close')}
-                className={
-                  'bg-base-300/65 btn btn-ghost btn-circle hidden h-6 min-h-6 w-6 p-0 sm:flex'
-                }
-              >
-                <MdClose size={closeIconSize} />
-              </button>
-            </div>
+            <div className='hidden sm:flex'>{windowControls}</div>
           </div>
         </div>
       }