From d0d97a8dbcdcff443786bb90bd77becb55155c39 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 25 Apr 2022 19:51:39 +0530
Subject: [PATCH] fix: image zoom over 100% (#998)

---
 .../Components/Files/FilePreviewModal.tsx     |  4 +-
 .../Components/Files/ImagePreview.tsx         | 40 ++++++++++++-------
 app/assets/stylesheets/_sn.scss               |  4 ++
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 0c42e1593..248701fa5 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -115,8 +115,8 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
             </button>
           </div>
         </div>
-        <div className="flex flex-grow min-h-0 overflow-auto">
-          <div className="flex flex-grow items-center justify-center relative">
+        <div className="flex flex-grow min-h-0">
+          <div className="flex flex-grow items-center justify-center relative max-w-full">
             {objectUrl ? (
               <PreviewComponent file={file} objectUrl={objectUrl} />
             ) : isLoadingFile ? (
diff --git a/app/assets/javascripts/Components/Files/ImagePreview.tsx b/app/assets/javascripts/Components/Files/ImagePreview.tsx
index 49d827513..7aecc46ab 100644
--- a/app/assets/javascripts/Components/Files/ImagePreview.tsx
+++ b/app/assets/javascripts/Components/Files/ImagePreview.tsx
@@ -13,21 +13,31 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
   const [imageZoomPercent, setImageZoomPercent] = useState(100)
 
   return (
-    <div className="flex items-center justify-center w-full h-full overflow-auto">
-      <img
-        src={objectUrl}
-        style={{
-          'min-width': '100%',
-          height: `${imageZoomPercent}%`,
-          'object-fit': 'contain',
-        }}
-        ref={(imgElement) => {
-          if (!initialImgHeightRef.current) {
-            initialImgHeightRef.current = imgElement?.height
-          }
-        }}
-      />
-      <div className="flex items-center absolute bottom-6 py-1 px-3 bg-default border-1 border-solid border-main rounded">
+    <div className="flex items-center justify-center w-full h-full">
+      <div className="flex items-center justify-center w-full h-full relative overflow-auto">
+        <img
+          src={objectUrl}
+          style={{
+            height: `${imageZoomPercent}%`,
+            ...(imageZoomPercent <= 100
+              ? {
+                  'min-width': '100%',
+                  'object-fit': 'contain',
+                }
+              : {
+                  position: 'absolute',
+                  inset: 0,
+                  margin: 'auto',
+                }),
+          }}
+          ref={(imgElement) => {
+            if (!initialImgHeightRef.current) {
+              initialImgHeightRef.current = imgElement?.height
+            }
+          }}
+        />
+      </div>
+      <div className="flex items-center absolute left-1/2 -translate-x-1/2 bottom-6 py-1 px-3 bg-default border-1 border-solid border-main rounded">
         <span className="mr-1.5">Zoom:</span>
         <IconButton
           className="hover:bg-contrast p-1 rounded"
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 131418528..bfa58afa4 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -347,6 +347,10 @@
   max-width: 35ch;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }