ui: responsive dialog size for portrait screens (#473)

* fix: handle network error in sync API

* fix: reasonable default column width for iPad

* ui: responsive dialog size for portrait screens

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

@@ -110,7 +110,10 @@ const Dialog: React.FC<DialogProps> = ({
       <div
         className={clsx(
           'modal-box settings-content z-20 flex flex-col rounded-none rounded-tl-2xl rounded-tr-2xl p-0 sm:rounded-2xl',
-          'h-full max-h-full w-full max-w-full sm:w-[65%] sm:max-w-[600px]',
+          'h-full max-h-full w-full max-w-full',
+          window.innerWidth < window.innerHeight
+            ? 'sm:h-[50%] sm:w-3/4'
+            : 'sm:h-[65%] sm:w-1/2 sm:max-w-[600px]',
           appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)] sm:pt-0',
           boxClassName,
         )}