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

apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx

@@ -36,7 +36,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
       </button>
       <ul
         tabIndex={0}
-        className='dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-0 z-[1] mt-4 w-44 shadow'
+        className='dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-[-32px] z-[1] mt-4 w-44 shadow sm:right-0'
       >
         {options.map((option) => (
           <li key={option} onClick={() => onSelect(option)}>
@@ -51,7 +51,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
         {moreOptions && moreOptions.length > 0 && (
           <li className='dropdown dropdown-left dropdown-top'>
             <div className='flex items-center px-0'>
-              <span style={{ minWidth: `${iconSize16}px` }}>
+              <span style={{ minWidth: `${defaultIconSize}px` }}>
                 <FiChevronLeft size={iconSize16} />
               </span>
               <span>{_('System Fonts')}</span>
@@ -60,7 +60,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
               tabIndex={0}
               className={clsx(
                 'dropdown-content bgcolor-base-200 menu rounded-box relative z-[1] overflow-y-scroll shadow',
-                '!mr-5 mb-[-46px] inline max-h-80 w-[220px] overflow-y-scroll',
+                '!mr-5 mb-[-46px] inline max-h-80 w-[200px] overflow-y-scroll',
               )}
             >
               {moreOptions.map((option) => (

apps/readest-app/src/app/reader/components/settings/FontPanel.tsx

@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
 import NumberInput from './NumberInput';
 import FontDropdown from './FontDropDown';
 import {
+  ANDROID_FONTS,
+  IOS_FONTS,
   LINUX_FONTS,
   MACOS_FONTS,
   MONOSPACE_FONTS,
@@ -76,6 +78,12 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     case 'linux':
       moreFonts = LINUX_FONTS;
       break;
+    case 'ios':
+      moreFonts = IOS_FONTS;
+      break;
+    case 'android':
+      moreFonts = ANDROID_FONTS;
+      break;
     default:
       break;
   }