From 8eecd85fba783e89b0c67a7938ffafda5ab4e4df Mon Sep 17 00:00:00 2001
From: minhe7735 <minhe@buffalo.edu>
Date: Fri, 15 Oct 2021 09:20:42 -0400
Subject: [PATCH 1/2] Better portrait support

---
 src/components/manga/reader/Page.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/manga/reader/Page.tsx b/src/components/manga/reader/Page.tsx
index df598f6494..4444e34a24 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'
@@ -31,9 +47,8 @@ function imageStyle(settings: IReaderSettings): any {
     return {
         display: 'block',
         marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
-        minWidth: '50vw',
-        width: '100%',
-        maxWidth: '100%',
+        width: dimensions.width < dimensions.height ? '100vw' : 'auto',
+        height: dimensions.width < dimensions.height ? 'auto' : '100vh',
     };
 }
 
@@ -105,7 +120,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}

From e5c6c6a5046d23f0dba2934cc7cce8a00b81fffa Mon Sep 17 00:00:00 2001
From: minhe7735 <minhe@buffalo.edu>
Date: Sat, 16 Oct 2021 20:31:16 -0400
Subject: [PATCH 2/2] re-added min and max width. Fixed react hook syntax

---
 src/components/manga/reader/Page.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/manga/reader/Page.tsx b/src/components/manga/reader/Page.tsx
index 4444e34a24..40af457f01 100644
--- a/src/components/manga/reader/Page.tsx
+++ b/src/components/manga/reader/Page.tsx
@@ -26,7 +26,7 @@ function imageStyle(settings: IReaderSettings): any {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    });
+    }, []);
     if (settings.readerType === 'DoubleLTR'
     || settings.readerType === 'DoubleRTL'
     || settings.readerType === 'ContinuesHorizontalLTR'
@@ -47,8 +47,9 @@ function imageStyle(settings: IReaderSettings): any {
     return {
         display: 'block',
         marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
-        width: dimensions.width < dimensions.height ? '100vw' : 'auto',
-        height: dimensions.width < dimensions.height ? 'auto' : '100vh',
+        minWidth: '50vw',
+        width: dimensions.width < dimensions.height ? '100vw' : '100%',
+        maxWidth: '100%',
     };
 }