From 7ce8939dceb7f3e737fbb2e56d8704f28431ca84 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 25 Jun 2021 17:09:03 +0700
Subject: [PATCH] fixed image width calculation

---
 src/components/media/ImagePreloader/index.tsx | 38 ++++++++-----------
 .../media/ImagePreloader/styles.module.scss   |  9 +++++
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/components/media/ImagePreloader/index.tsx b/src/components/media/ImagePreloader/index.tsx
index 7431f315..4e241194 100644
--- a/src/components/media/ImagePreloader/index.tsx
+++ b/src/components/media/ImagePreloader/index.tsx
@@ -47,43 +47,37 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
 
   useResizeHandler(onResize);
 
+  const estimatedWidth = (width * maxHeight) / height;
+
   return (
     <>
       <svg
         viewBox={`0 0 ${width} ${height}`}
         className={classNames(styles.preview, { [styles.is_loaded]: loaded })}
         style={{
-          maxHeight,
-          height: height,
+          maxHeight: maxHeight,
+          width: estimatedWidth,
         }}
         onClick={onClick}
       >
         <defs>
           <filter id="f1" x="0" y="0">
-            <feGaussianBlur
-              stdDeviation="30 30"
-              x="0%"
-              y="0%"
-              width="100%"
-              height="100%"
-              in="blend"
-              edgeMode="none"
-              result="blur2"
-            />
+            <feGaussianBlur in="SourceGraphic" stdDeviation="30" />
           </filter>
         </defs>
 
-        <rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
+        <g filter="url(#f1)">
+          <rect fill="#222222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
 
-        {!hasError && (
-          <image
-            xlinkHref={getURL(file, PRESETS['300'])}
-            width="100%"
-            height="100%"
-            filter="url(#f1)"
-            onLoad={onLoad}
-          />
-        )}
+          {!hasError && (
+            <image
+              xlinkHref={getURL(file, PRESETS['300'])}
+              width="100%"
+              height="100%"
+              onLoad={onLoad}
+            />
+          )}
+        </g>
       </svg>
 
       <img
diff --git a/src/components/media/ImagePreloader/styles.module.scss b/src/components/media/ImagePreloader/styles.module.scss
index 0db4b813..388806cd 100644
--- a/src/components/media/ImagePreloader/styles.module.scss
+++ b/src/components/media/ImagePreloader/styles.module.scss
@@ -24,8 +24,17 @@
   bottom: 40px;
   opacity: 0.4;
 
+  @include tablet {
+    right: 5px;
+    bottom: 5px;
+  }
+
   svg {
     fill: currentColor;
+
+    @include tablet {
+      transform: scale(0.6);
+    }
   }
 }