From 99c9d9d12f3c4a70066f4821d49be99815d3d2f9 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sat, 17 Feb 2024 00:41:37 +0100
Subject: [PATCH] Use set reader width on small devices (#602)

On small devices (greater height than width) the width was always set to 100vw ignoring the set reader width via the settings
---
 src/components/reader/Page.tsx | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx
index 25954393..0b0a63bc 100644
--- a/src/components/reader/Page.tsx
+++ b/src/components/reader/Page.tsx
@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useState, useEffect, forwardRef, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { useMediaQuery } from '@mui/material';
@@ -17,24 +17,6 @@ export const isHorizontalReaderType = (readerType: ReaderType): boolean =>
     ['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType);
 
 export function imageStyle(settings: IReaderSettings): any {
-    const [dimensions, setDimensions] = useState({
-        height: window.innerHeight,
-        width: window.innerWidth,
-    });
-    useEffect(() => {
-        function handleResize() {
-            setDimensions({
-                height: window.innerHeight,
-                width: window.innerWidth,
-            });
-        }
-
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-
     const isHorizontal = isHorizontalReaderType(settings.readerType);
     if (settings.fitPageToWindow || isHorizontal) {
         return {
@@ -52,7 +34,7 @@ export function imageStyle(settings: IReaderSettings): any {
     return {
         marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
         minWidth: '10vw',
-        width: dimensions.width < dimensions.height ? '100vw' : `${settings.readerWidth}%`,
+        width: `${settings.readerWidth}%`,
         maxWidth: '100%',
         objectFit: 'contain',
     };