Layout tweaks on mobile browsers (#219)

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

@@ -110,12 +110,12 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
                 {window.innerWidth >= 400 && (
                   <div className='flex flex-wrap items-center gap-x-4 gap-y-2 py-2'>
                     <button
-                      className='btn rounded bg-red-600 text-white hover:bg-red-700'
+                      className='btn rounded-xl bg-red-600 px-4 text-white hover:bg-red-700'
                       onClick={handleDelete}
                     >
                       {_('Delete')}
                     </button>
-                    <button className='btn btn-disabled bg-primary/25 hover:bg-primary/85 rounded px-4 text-white'>
+                    <button className='btn btn-disabled bg-primary/25 hover:bg-primary/85 rounded-xl px-4 text-white'>
                       {_('More Info')}
                     </button>
                   </div>

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

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { ReactNode, useEffect } from 'react';
 import { MdArrowBackIosNew } from 'react-icons/md';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 interface DialogProps {
   id?: string;
@@ -25,6 +26,7 @@ const Dialog: React.FC<DialogProps> = ({
   contentClassName,
   onClose,
 }) => {
+  const iconSize22 = useResponsiveSize(22);
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
       onClose();
@@ -67,7 +69,7 @@ const Dialog: React.FC<DialogProps> = ({
                   'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent focus:outline-none sm:hidden'
                 }
               >
-                <MdArrowBackIosNew />
+                <MdArrowBackIosNew size={iconSize22} />
               </button>
               <div className='z-15 pointer-events-none absolute inset-0 flex h-11 items-center justify-center'>
                 <span className='line-clamp-1 text-center font-bold'>{title ?? ''}</span>