From bdde3929fc14ee8ad99f5cbe12eff3a5c8b7163b Mon Sep 17 00:00:00 2001
From: Claire Chabas <claire.chabas@gmail.com>
Date: Fri, 10 Oct 2025 17:41:54 +0200
Subject: [PATCH] Fix web frame height (#3709)

---
 .changeset/giant-jobs-greet.md                |  5 ++++
 bun.lock                                      |  5 ++--
 packages/react-contentkit/package.json        |  3 ++-
 .../react-contentkit/src/ElementWebframe.tsx  | 27 ++++++++++++-------
 4 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/giant-jobs-greet.md

diff --git a/.changeset/giant-jobs-greet.md b/.changeset/giant-jobs-greet.md
new file mode 100644
index 000000000..1dab66d93
--- /dev/null
+++ b/.changeset/giant-jobs-greet.md
@@ -0,0 +1,5 @@
+---
+"@gitbook/react-contentkit": patch
+---
+
+Fix web frame height calculation
diff --git a/bun.lock b/bun.lock
index 3203a86b4..996a3bde4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,8 +6,8 @@
       "devDependencies": {
         "@biomejs/biome": "^1.9.4",
         "@changesets/cli": "^2.29.7",
-        "turbo": "^2.5.0",
-        "vercel": "^39.3.0",
+        "turbo": "^2.5.8",
+        "vercel": "^39.4.2",
       },
     },
     "packages/browser-types": {
@@ -241,6 +241,7 @@
         "@gitbook/api": "catalog:",
         "@gitbook/icons": "workspace:*",
         "classnames": "^2.5.1",
+        "usehooks-ts": "^3.1.0",
       },
       "devDependencies": {
         "typescript": "^5.5.3",
diff --git a/packages/react-contentkit/package.json b/packages/react-contentkit/package.json
index d0f52006c..28c6546bb 100644
--- a/packages/react-contentkit/package.json
+++ b/packages/react-contentkit/package.json
@@ -11,7 +11,8 @@
     "dependencies": {
         "classnames": "^2.5.1",
         "@gitbook/api": "catalog:",
-        "@gitbook/icons": "workspace:*"
+        "@gitbook/icons": "workspace:*",
+        "usehooks-ts": "^3.1.0"
     },
     "peerDependencies": {
         "react": "*"
diff --git a/packages/react-contentkit/src/ElementWebframe.tsx b/packages/react-contentkit/src/ElementWebframe.tsx
index fbbee7a85..adba6396f 100644
--- a/packages/react-contentkit/src/ElementWebframe.tsx
+++ b/packages/react-contentkit/src/ElementWebframe.tsx
@@ -2,7 +2,9 @@
 
 import type { ContentKitWebFrame } from '@gitbook/api';
 import React from 'react';
+import { useResizeObserver } from 'usehooks-ts';
 
+import { Icon } from '@gitbook/icons';
 import { useContentKitClientContext } from './context';
 import { resolveDynamicBinding } from './dynamic';
 import type { ContentKitClientElementProps } from './types';
@@ -47,9 +49,7 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
         [renderer.security]
     );
 
-    //
-    // Listen to message coming from the webframe
-    //
+    // Listen to messages coming from the webframe
     React.useEffect(() => {
         const callback = (event: MessageEvent) => {
             if (!iframeRef.current) {
@@ -83,7 +83,7 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
                     // https://docs.embed.ly/reference/provider-height-resizing
                     const parsed = JSON.parse(message);
                     if (parsed.context === 'iframe.resize' && typeof parsed.height === 'number') {
-                        const width = contentWindow.outerWidth;
+                        const width = iframeRef.current.clientWidth;
                         const height = parsed.height;
 
                         setSize({
@@ -145,9 +145,7 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
         };
     }, [renderer, sendMessage]);
 
-    //
     // Send data to the webframe
-    //
     React.useEffect(() => {
         if (!element.data) {
             return;
@@ -161,12 +159,20 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
         return sendMessage({ state });
     }, [element.data, renderer.state, sendMessage]);
 
-    if (!mounted) {
-        return null;
-    }
+    const { width: observedWidth = 0 } = useResizeObserver({ ref: iframeRef });
+    const liveWidth = observedWidth || iframeRef.current?.clientWidth || 0;
 
     const aspectRatio = size.aspectRatio || element.aspectRatio;
 
+    const height =
+        liveWidth && aspectRatio && liveWidth > (size.height ?? 0)
+            ? Math.min(Math.round(liveWidth / aspectRatio), size.height ?? 32)
+            : 'auto';
+
+    if (!mounted) {
+        return <Icon icon="spinner" className="contentkit-button-loading" style={{ height }} />;
+    }
+
     return (
         <iframe
             ref={iframeRef}
@@ -179,7 +185,8 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
                 width: '100%',
                 maxWidth: '100%',
                 aspectRatio,
-                height: size.height ? Math.max(size.height, 32) : '100%',
+                maxHeight: height,
+                height: 'fit-content',
                 border: 'none',
             }}
         />