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

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;

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"

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