fix: image zoom over 100% (#998)

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 ? (

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"

app/assets/stylesheets/_sn.scss

@@ -347,6 +347,10 @@
   max-width: 35ch;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }