From 7053273b610824db245882ce090cac5f33c10174 Mon Sep 17 00:00:00 2001
From: minhe7735 <61667570+minhe7735@users.noreply.github.com>
Date: Sun, 17 Oct 2021 03:15:14 -0400
Subject: [PATCH] Better portrait support (#41)

* Better portrait support

* re-added min and max width. Fixed react hook syntax
---
 src/components/manga/reader/Page.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/manga/reader/Page.tsx b/src/components/manga/reader/Page.tsx
index df598f64..40af457f 100644
--- a/src/components/manga/reader/Page.tsx
+++ b/src/components/manga/reader/Page.tsx
@@ -11,6 +11,22 @@ import SpinnerImage from 'components/SpinnerImage';
 import useLocalStorage from 'util/useLocalStorage';
 
 function imageStyle(settings: IReaderSettings): any {
+    const [dimensions, setDimensions] = React.useState({
+        height: window.innerHeight,
+        width: window.innerWidth,
+    });
+    React.useEffect(() => {
+        function handleResize() {
+            setDimensions({
+                height: window.innerHeight,
+                width: window.innerWidth,
+            });
+        }
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
     if (settings.readerType === 'DoubleLTR'
     || settings.readerType === 'DoubleRTL'
     || settings.readerType === 'ContinuesHorizontalLTR'
@@ -32,7 +48,7 @@ function imageStyle(settings: IReaderSettings): any {
         display: 'block',
         marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
         minWidth: '50vw',
-        width: '100%',
+        width: dimensions.width < dimensions.height ? '100vw' : '100%',
         maxWidth: '100%',
     };
 }
@@ -105,7 +121,7 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
     }, [handleVerticalScroll]);
 
     return (
-        <div ref={ref} style={{ margin: '0 auto' }}>
+        <div ref={ref} style={{ margin: 'auto' }}>
             <SpinnerImage
                 src={`${src}?useCache=${useCache}`}
                 onImageLoad={onImageLoad}