Hotfix: Embed ModalBox - Hidden Content (#3491)

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 {

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";
       }
     });