Adjust frame height (#525)

Co-authored-by: Eric Lau <[email protected]>

Author: muhammedsirajudeen

packages/ui/src/embed.ts

@@ -11,6 +11,8 @@ const iframes = new WeakMap<MessageEventSource, HTMLIFrameElement>();
 let unsupportedVersion: boolean = false;
 const unsupportedVersionFrameHeight = 'auto';
 
+const iframeHeightDiff = '206px';
+
 window.addEventListener('message', function (e: MessageEvent<Message>) {
   if (e.source) {
     if (e.data.kind === 'oz-wizard-unsupported-version') {
@@ -22,7 +24,7 @@ window.addEventListener('message', function (e: MessageEvent<Message>) {
     } else if (e.data.kind === 'oz-wizard-resize') {
       const iframe = iframes.get(e.source);
       if (iframe) {
-        iframe.style.height = unsupportedVersion ? unsupportedVersionFrameHeight : 'calc(100vh - 100px)';
+        iframe.style.height = unsupportedVersion ? unsupportedVersionFrameHeight : `calc(100vh - ${iframeHeightDiff})`;
       }
     }
   }
@@ -60,7 +62,7 @@ onDOMContentLoaded(function () {
     iframe.style.display = 'block';
     iframe.style.border = '0';
     iframe.style.width = '100%';
-    iframe.style.height = 'calc(100vh - 100px)';
+    iframe.style.height = `calc(100vh - ${iframeHeightDiff} )`;
     iframe.allow = 'clipboard-write';
 
     w.appendChild(iframe);

packages/ui/src/standalone.css

@@ -131,7 +131,7 @@ body {
 
 /* Wizard */
 .wizard-container {
-  padding: 0 1rem 1.5rem;
+  padding: 0 1rem 0;
   max-width: 100%;
   margin: 0 auto 0;
 }