fix(layout): consistent padding and radius for the dialog header, closes #3352 (#3356)

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

@@ -226,7 +226,7 @@ const Dialog: React.FC<DialogProps> = ({
         >
           <div className='bg-base-content/50 h-1 w-10 rounded-full'></div>
         </div>
-        <div className='dialog-header sticky top-1 z-10 flex items-center justify-between px-2 sm:px-4'>
+        <div className='dialog-header sticky top-1 z-10 flex items-center justify-between px-2 sm:pe-3 sm:ps-2'>
           {header ? (
             header
           ) : (

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

@@ -5,12 +5,12 @@ import { useEnv } from '@/context/EnvContext';
 import { useSettingsStore } from '@/store/settingsStore';
 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 {
+  bookKey: string;
   activePanel: SettingsPanelType;
   setIsDropdownOpen?: (open: boolean) => void;
   onReset: () => void;
@@ -18,6 +18,7 @@ interface DialogMenuProps {
 }
 
 const DialogMenu: React.FC<DialogMenuProps> = ({
+  bookKey,
   activePanel,
   setIsDropdownOpen,
   onReset,
@@ -25,7 +26,6 @@ const DialogMenu: React.FC<DialogMenuProps> = ({
 }) => {
   const _ = useTranslation();
   const { envConfig, appService } = useEnv();
-  const iconSize = useResponsiveSize(16);
   const { setFontPanelView, isSettingsGlobal, setSettingsGlobal } = useSettingsStore();
   const { getAllFonts, removeFont, saveCustomFonts } = useCustomFontStore();
 
@@ -59,8 +59,9 @@ const DialogMenu: React.FC<DialogMenuProps> = ({
       <MenuItem
         label={_('Global Settings')}
         tooltip={isSettingsGlobal ? _('Apply to All Books') : _('Apply to This Book')}
+        disabled={!bookKey}
         buttonClass='lg:tooltip'
-        Icon={isSettingsGlobal ? <MdCheck size={iconSize} className='text-base-content' /> : null}
+        Icon={isSettingsGlobal ? MdCheck : null}
         onClick={handleToggleGlobal}
       />
       <MenuItem label={resetLabel || _('Reset Settings')} onClick={handleResetToDefaults} />

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

@@ -256,6 +256,7 @@ const SettingsDialog: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         toggleButton={<PiDotsThreeVerticalBold />}
       >
         <DialogMenu
+          bookKey={bookKey}
           activePanel={activePanel}
           onReset={handleResetCurrentPanel}
           resetLabel={