From 9b5d311136c0dbf1c9be8f840f9800848e16e8e8 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Fri, 22 Jul 2022 12:59:13 +0530
Subject: [PATCH] Hotfix: Embed ModalBox - Hidden Content (#3491)

---
 .../embed-core/src/ModalBox/ModalBoxHtml.ts   | 34 ++++++-------------
 packages/embeds/embed-core/src/embed.ts       |  7 ++--
 2 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts b/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts
index bd8f76110f..c0985c9731 100644
--- a/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts
+++ b/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts
@@ -10,30 +10,16 @@ const html = `<style>
   background-color:rgb(5,5,5, 0.8)
 }
 
-@media only screen and (min-width:600px) {
-  .modal-box {
-    margin:0 auto;
-    margin-top:20px;
-    margin-bottom:20px;
-    position:absolute;
-    width:100%;
-    top:50%;
-    left:50%;
-    transform: translateY(-50%) translateX(-50%);
-    overflow: auto;
-  }
-}
-
-@media only screen and (max-width:600px) {
-  .modal-box {
-  width: 100%;
-  height: 80%;
-  position:fixed;
-  top:50px;
-  left:0;
-  right: 0;
-  margin: 0;
-  }
+.modal-box {
+  margin:0 auto;
+  margin-top:20px;
+  margin-bottom:20px;
+  position:absolute;
+  width:100%;
+  top:50%;
+  left:50%;
+  transform: translateY(-50%) translateX(-50%);
+  overflow: auto;
 }
 
 .header {
diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts
index 709dd1221c..441ac89643 100644
--- a/packages/embeds/embed-core/src/embed.ts
+++ b/packages/embeds/embed-core/src/embed.ts
@@ -469,11 +469,8 @@ export class Cal {
       if (this.modalBox) {
         // It ensures that if the iframe is so tall that it can't fit in the parent window without scroll. Then force the scroll by restricting the max-height to innerHeight
         // This case is reproducible when viewing in ModalBox on Mobile.
-        iframe.style.maxHeight = window.innerHeight + "px";
-        // Automatically setting the height of modal-box as per iframe creates problem in managing width of iframe.
-        // if (iframe.style.width !== "100%") {
-        //   this.modalBox!.shadowRoot!.querySelector(".modal-box")!.style.width = iframe.style.width;
-        // }
+        const spacingTopPlusBottom = 2 * 50; // 50 is the padding we want to keep to show close button comfortably. Make it same as top for bottom.
+        iframe.style.maxHeight = window.innerHeight - spacingTopPlusBottom + "px";
       }
     });