From d017a3500ae7bdb090694feb48688c1d720c1aba Mon Sep 17 00:00:00 2001
From: Andras Timar <andras.timar@collabora.com>
Date: Tue, 21 Jul 2026 12:33:19 +0200
Subject: [PATCH] fix(settings): resize the settings iframe to its reported
 height

The embedded settings page posts an Iframe_Height message so the parent
can grow the iframe to fit its content. The handler read event.data as
an object, but the message arrives as a JSON string, so data.MessageId
was always undefined and the resize never ran, leaving a short frame
with an inner scrollbar. Parse the string before inspecting it.

Also set style.height instead of the deprecated height attribute, which
ignores a "<n>px" value, verify the sender origin, and add a min-height
fallback for the moment before the first height message arrives.

Signed-off-by: Andras Timar <andras.timar@collabora.com>
---
 src/components/CoolFrame.vue | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/CoolFrame.vue b/src/components/CoolFrame.vue
index 6821c76cdf..579a153030 100644
--- a/src/components/CoolFrame.vue
+++ b/src/components/CoolFrame.vue
@@ -98,9 +98,26 @@ export default {
 				if (this.iframeUrl && event.origin !== new URL(this.iframeUrl).origin) {
 					return
 				}
-				const data = event.data
-				if (data.MessageId === 'Iframe_Height') {
-					document.getElementById(this.iframeName).height = data.Values.ContentHeight
+
+				// The embedded settings page posts a JSON string, so event.data is a
+				// string here, not an object. Parse it before inspecting MessageId.
+				let data = event.data
+				if (typeof data === 'string') {
+					try {
+						data = JSON.parse(data)
+					} catch (e) {
+						return
+					}
+				}
+				if (data && data.MessageId === 'Iframe_Height') {
+					const iframe = document.getElementById(this.iframeName)
+					const height = data.Values && data.Values.ContentHeight
+					// Grow the iframe to the reported content height so it does not
+					// show an inner scrollbar. Use style.height: the deprecated
+					// height attribute ignores a "<n>px" value.
+					if (iframe && height) {
+						iframe.style.height = height
+					}
 				}
 			} catch (e) {
 				console.error('Something went wrong with post message', e)
@@ -114,6 +131,9 @@ export default {
   <style scoped>
   .cool-frame-iframe {
     width: 100%;
+    /* Fallback before the first Iframe_Height message sets the real height,
+       so the iframe is not stuck at the 150px HTML default. */
+    min-height: 800px;
     border: none;
 	overflow-y: auto;
 	box-sizing: border-box;