From 624283643ccc19551db3c19cbb1c9bbedcb8b377 Mon Sep 17 00:00:00 2001
From: Hiers <dvmap@protonmail.com>
Date: Wed, 13 Jul 2022 14:20:43 +0100
Subject: [PATCH] Fixed right flip panel not being all the way on the right;
 changed real image size option to not be hard coded.

---
 public/js/reader.js       | 17 ++---------------
 src/views/reader.html.ecr |  8 ++++----
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/public/js/reader.js b/public/js/reader.js
index df92b4f..63cef7f 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -67,8 +67,9 @@ const readerComponent = () => {
 					}
 
 					const savedFitType = localStorage.getItem('fitType');
-					if(savedFitType){
+					if (savedFitType) {
 						this.fitType = savedFitType;
+						$('#fit-select').val(savedFitType);
 					}
 					const savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
 					this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
@@ -306,19 +307,6 @@ const readerComponent = () => {
 				});
 			});
 		},
-		/**
-		 * Sets the image to not be restricted to the size of its container if it's not being scaled
-		 *
-		 * @param {string} fitType - ver, horz and real for fitting to height, width,
-		 * and showing real size, respectively
-		 */
-		setFit(fitType){
-			if (fitType === 'real'){
-				document.styleSheets[0].rules[21].style.maxWidth = '';
-			} else {
-				document.styleSheets[0].rules[21].style.maxWidth = '100%';
-			}
-		},
 		/**
 		 * Marks progress as 100% and jumps to the next entry
 		 *
@@ -355,7 +343,6 @@ const readerComponent = () => {
 
 		fitChanged(){
 			this.fitType = $('#fit-select').val();
-			this.setFit(this.fitType);
 			localStorage.setItem('fitType', this.fitType);
 		},
 
diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr
index dacd222..f1e7236 100644
--- a/src/views/reader.html.ecr
+++ b/src/views/reader.html.ecr
@@ -19,7 +19,7 @@
       </div>
 
       <div
-        :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}">
+        :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}" style="width: fit-content;">
         <div x-show="!loading && mode === 'continuous'" x-cloak>
           <template x-if="!loading && mode === 'continuous'" x-for="item in items">
             <img
@@ -40,7 +40,7 @@
           <%- end -%>
         </div>
 
-        <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:${fitType === 'vert' ? '100vh' : ''">
+        <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" :style="`height:${fitType === 'vert' ? '100vh' : ''}; min-width: fit-content; position: relative;`">
 
           <img uk-img :class="{
                                'uk-align-center': true, 
@@ -50,8 +50,8 @@
                                                                                                                                                                  width:${fitType === 'horz' ? '100vw' : 'auto'}; 
                                                                                                                                                                  height:${fitType === 'vert' ? '100vh' : 'auto'}; 
                                                                                                                                                                  margin-bottom:0;
-                                                                                                                                                                 max-width:${fitType === 'horz' ? '100%' : ''};
-                                                                                                                                                                 max-height:${fitType === 'vert' ? '100%' : ''};
+                                                                                                                                                                 max-width:${fitType === 'horz' ? '100%' : fitType === 'vert' ? '' : 'none' };
+                                                                                                                                                                 max-height:${fitType === 'vert' ? '100%' : fitType === 'horz' ? '' : 'none'};
                                                                                                                                                                  object-fit: contain;
                                                                                                                                                                  `" />