Added auto height adjustment to membership portal preview

no issue

- added `@onDestroyed` argument to `<GhSiteIframe>` so consumers can clean up any references
- used `@onLoaded` and `@onDestroyed` to handle a reference to the preview iframe
- updated portal preview load handler and update method to trigger a resize task
  - add a 100ms delay to allow for portal to re-render itself
  - reach through the two iframes to get the portal container element and use it's height to set the style attribute on the portal preview container element

ghost/admin/app/components/gh-site-iframe.js

@@ -8,6 +8,10 @@ export default class GhSiteIframeComponent extends Component {
 
     @tracked isInvisible = this.args.invisibleUntilLoaded;
 
+    willDestroy() {
+        this.args.onDestroyed?.();
+    }
+
     get srcUrl() {
         return this.args.src || `${this.config.get('blogUrl')}/`;
     }

ghost/admin/app/controllers/settings/membership.js

@@ -3,6 +3,7 @@ import {action} from '@ember/object';
 import {currencies, getCurrencyOptions, getSymbol} from 'ghost-admin/utils/currency';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency-decorators';
+import {timeout} from 'ember-concurrency';
 import {tracked} from '@glimmer/tracking';
 
 const CURRENCIES = currencies.map((currency) => {
@@ -184,6 +185,40 @@ export default class MembersAccessController extends Controller {
             monthlyPrice,
             yearlyPrice
         });
+
+        this.resizePortalPreviewTask.perform();
+    }
+
+    @action
+    portalPreviewLoaded(event) {
+        this.portalPreviewIframe = event.target;
+        this.resizePortalPreviewTask.perform();
+    }
+
+    @action
+    portalPreviewDestroyed() {
+        this.portalPreviewIframe = null;
+        this.resizePortalPreviewTask.cancelAll();
+    }
+
+    @task({restartable: true})
+    *resizePortalPreviewTask() {
+        if (this.portalPreviewIframe && this.portalPreviewIframe.contentWindow) {
+            yield timeout(100); // give time for portal to re-render
+
+            const portalIframe = this.portalPreviewIframe.contentWindow.document.querySelector('#ghost-portal-root iframe');
+            if (!portalIframe) {
+                return;
+            }
+
+            const portalContainer = portalIframe.contentWindow.document.querySelector('.gh-portal-popup-container');
+            if (!portalContainer) {
+                return;
+            }
+
+            const height = portalContainer.clientHeight;
+            this.portalPreviewIframe.parentNode.style.height = `${height}px`;
+        }
     }
 
     @action

ghost/admin/app/templates/settings/membership.hbs

@@ -53,7 +53,9 @@
                     {{else}}
                         <GhSiteIframe
                             @src={{this.portalPreviewUrl}}
-                            @invisibleUntilLoaded={{true}} />
+                            @invisibleUntilLoaded={{true}}
+                            @onLoad={{this.portalPreviewLoaded}}
+                            @onDestroyed={{this.portalPreviewDestroyed}} />
                     {{/if}}
                 </div>
             </div>