From bcaf95f50637ff20922a3ea0bcb2603faafa79da Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Thu, 1 Jun 2023 14:34:29 +0200
Subject: [PATCH] Updated signup form with minimal style to use automatic
 height and minimum height

refs https://github.com/TryGhost/Team/issues/3295
refs https://ghost.slack.com/archives/C04TMVA1D7A/p1685620939701309?thread_ts=1685614059.121599&cid=C04TMVA1D7A

- The error message of the minimal style form is not visible
- Use minimum height instead of fixed height
- Automatically update height
- Fixed issues with iframe inline style causing spacing and layout jumps
---
 .../components/settings/signup-form-embed.js  |  2 +-
 ghost/signup-form/index.html                  |  4 +--
 ghost/signup-form/src/components/Frame.tsx    | 34 +++++++++++++++++++
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/settings/signup-form-embed.js b/ghost/admin/app/components/settings/signup-form-embed.js
index 2627953268..2cc5bab90a 100644
--- a/ghost/admin/app/components/settings/signup-form-embed.js
+++ b/ghost/admin/app/components/settings/signup-form-embed.js
@@ -49,7 +49,7 @@ export default class SignupFormEmbed extends Component {
             options[`label-${i + 1}`] = label.name;
         }
 
-        let style = 'height: 58px';
+        let style = 'min-height: 58px';
 
         if (this.style === 'all-in-one') {
             options.logo = this.settings.icon;
diff --git a/ghost/signup-form/index.html b/ghost/signup-form/index.html
index 43215eefe8..a0d86f0db7 100644
--- a/ghost/signup-form/index.html
+++ b/ghost/signup-form/index.html
@@ -53,7 +53,7 @@
         <hr>
         <h1>Minimal</h1>
 
-        <div style="height: 58px">
+        <div style="min-height: 58px">
             <script
                 type="module"
                 src="/src/index.tsx?other"
@@ -68,7 +68,7 @@
         <h1>With invalid configuration</h1>
         <p>When you submit this one, it will throw an error.</p>
 
-        <div style="height: 58px">
+        <div style="min-height: 58px">
             <script
                 type="module"
                 src="/src/index.tsx?other2"
diff --git a/ghost/signup-form/src/components/Frame.tsx b/ghost/signup-form/src/components/Frame.tsx
index 56d55a8676..5b7417d140 100644
--- a/ghost/signup-form/src/components/Frame.tsx
+++ b/ghost/signup-form/src/components/Frame.tsx
@@ -2,6 +2,7 @@ import IFrame from './IFrame';
 import React, {useCallback, useState} from 'react';
 import styles from '../styles/iframe.css?inline';
 import {useAppContext} from '../AppContext';
+import {isMinimal} from '../utils/helpers';
 
 type FrameProps = {
     children: React.ReactNode
@@ -12,9 +13,20 @@ type FrameProps = {
  */
 export const Frame: React.FC<FrameProps> = ({children}) => {
     const style: React.CSSProperties = {
+        display: 'block', // iframe is by default inline, if we don't add this, the container will take up more height due to spaces, causing layout jumps
         width: '100%',
         height: '0px' // = default height
     };
+
+    const {options} = useAppContext();
+    if (isMinimal(options)) {
+        return (
+            <ResizableFrame style={style} title="signup frame">
+                {children}
+            </ResizableFrame>
+        );
+    }
+
     return (
         <FullHeightFrame style={style} title="signup frame">
             {children}
@@ -27,6 +39,27 @@ type ResizableFrameProps = FrameProps & {
     title: string,
 };
 
+/**
+ * This TailwindFrame has the same height as it contents and mimics a shadow DOM component
+ */
+const ResizableFrame: React.FC<ResizableFrameProps> = ({children, style, title}) => {
+    const [iframeStyle, setIframeStyle] = useState(style);
+    const onResize = useCallback((iframeRoot: HTMLElement) => {
+        setIframeStyle((current) => {
+            return {
+                ...current,
+                height: `${iframeRoot.scrollHeight}px`
+            };
+        });
+    }, []);
+
+    return (
+        <TailwindFrame style={iframeStyle} title={title} onResize={onResize}>
+            {children}
+        </TailwindFrame>
+    );
+};
+
 /**
  * This TailwindFrame has the same height as its container
  */
@@ -66,6 +99,7 @@ const FullHeightFrame: React.FC<ResizableFrameProps> = ({children, style, title}
     );
 };
 
+
 type TailwindFrameProps = ResizableFrameProps & {
     onResize?: (el: HTMLElement) => void
 };