From 207c983275da19abfb871d9a1971035acc9c7300 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Fri, 7 Jul 2023 13:13:57 +0330
Subject: [PATCH] fix: adjust the height of hero video to fit in its container;
 fixes #91

---
 .../components/mdx/HeroVideo/HeroVideo.scss    | 18 +++++++++++-------
 .../components/mdx/HeroVideo/HeroVideo.tsx     |  6 +++---
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
index 022de7c..32b84b6 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
@@ -4,6 +4,8 @@
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
+  position: relative;
+  flex-grow: 1;
 
   pointer-events: none;
 
@@ -22,9 +24,11 @@
 
     transform: translateY(var(--hero-video-offset-y));
 
-    max-width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 100%;
-    width: auto;
   }
 
   .mdx-hero-video__placeholder {
@@ -34,11 +38,12 @@
 
   img,
   video {
-    width: 100%;
-    height: auto;
     transform: scale(var(--hero-video-scale));
-    margin-left: calc((var(--hero-video-scale) - 100%) * -1);
-    transform-origin: top left;
+    transform-origin: top center;
+    object-position: top;
+
+    height: 100%;
+    max-width: var(--container-max-width);
   }
 }
 
@@ -64,7 +69,6 @@
     video {
       width: 100%;
       transform: scale(var(--hero-video-scale-mobile));
-      margin-left: calc((var(--hero-video-scale-mobile) - 100%) * -1);
     }
   }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
index 626294c..081589a 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
@@ -69,9 +69,9 @@ export const HeroVideo: React.FC<HeroVideoProps> = ({
         style={makeStyle(
           { ...style },
           {
-            'hero-video-scale': desktop?.scale ?? '58%',
-            'hero-video-offset-y': desktop?.offsetY ?? '-10%',
-            'hero-video-scale-mobile': mobile?.scale ?? '117.8%',
+            'hero-video-scale': desktop?.scale ?? '151.5%',
+            'hero-video-offset-y': desktop?.offsetY ?? '-120px',
+            'hero-video-scale-mobile': mobile?.scale ?? '140%',
             'hero-video-offset-y-mobile': mobile?.offsetY ?? '-10%',
           },
         )}