mobile: some UI tweaks and add system fonts (#233)

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

@@ -99,7 +99,7 @@ const Dialog: React.FC<DialogProps> = ({
 
         <div
           className={clsx(
-            'text-base-content my-2 flex-grow overflow-y-auto px-[10%]',
+            'text-base-content my-2 flex-grow overflow-y-auto px-6 sm:px-[10%]',
             contentClassName,
           )}
         >

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

@@ -35,7 +35,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     >
       <div className='flex items-center'>
         {!noIcon && <span style={{ minWidth: `${iconSize}px` }}>{icon}</span>}
-        <span className={clsx('ml-2 max-w-32 truncate', labelClass)}>{label}</span>
+        <span className={clsx('ml-2 truncate sm:max-w-32', labelClass)}>{label}</span>
       </div>
       {shortcut && <span className='text-neutral-content hidden text-sm sm:flex'>{shortcut}</span>}
     </button>