From 15101d68e44f8a606383af9bb68eb238b7ca8f13 Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Mon, 14 Sep 2026 15:32:18 -0400
Subject: [PATCH 1/4] Stores the ifrauDialogService so it is called on every
 updated to refresh the measures when dialog is rendered within an iframe.

---
 components/dialog/dialog-mixin.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/dialog/dialog-mixin.js b/components/dialog/dialog-mixin.js
index be94f4730e4..cc7436b5642 100644
--- a/components/dialog/dialog-mixin.js
+++ b/components/dialog/dialog-mixin.js
@@ -116,6 +116,7 @@ export const DialogMixin = superclass => class extends superclass {
 		const ifrauDialogService = await tryGetIfrauBackdropService();
 		if (this.opened) {
 			if (ifrauDialogService) {
+				this.#ifrauDialogService = ifrauDialogService;
 				this._ifrauContextInfo = await ifrauDialogService.showBackdrop();
 				this._inIframe = true;
 			}
@@ -125,6 +126,7 @@ export const DialogMixin = superclass => class extends superclass {
 				ifrauDialogService.hideBackdrop();
 				this._ifrauContextInfo = null;
 			}
+			this.#ifrauDialogService = null;
 			this._close();
 		}
 	}
@@ -165,6 +167,7 @@ export const DialogMixin = superclass => class extends superclass {
 	}
 
 	#useNativeInitialized = false;
+	#ifrauDialogService = null;
 
 	#handleMvcDialogOpen = () => {
 		// native dialogs on top layer will be stacked on non-native dialogs regardless of z-index
@@ -182,6 +185,7 @@ export const DialogMixin = superclass => class extends superclass {
 	};
 
 	#updateSize = async() => {
+		if (this._inIframe && this.#ifrauDialogService) this._ifrauContextInfo = await this.#ifrauDialogService.showBackdrop();
 		if (this._autoSize) {
 			if (this._ifrauContextInfo) {
 				if (this._ifrauContextInfo.top > defaultMargin.top) {

From 7d33ccb01f747041db2caa7adecd8f58179c6bfa Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Mon, 14 Sep 2026 15:33:00 -0400
Subject: [PATCH 2/4] Adds new demo page to visualize the dialog behavior
 within an iFrame

---
 .../dialog-fullscreen-in-iframe-contents.html | 42 ++++++++++++
 .../demo/dialog-fullscreen-in-iframe.html     | 65 +++++++++++++++++++
 index.html                                    |  1 +
 3 files changed, 108 insertions(+)
 create mode 100644 components/dialog/demo/dialog-fullscreen-in-iframe-contents.html
 create mode 100644 components/dialog/demo/dialog-fullscreen-in-iframe.html

diff --git a/components/dialog/demo/dialog-fullscreen-in-iframe-contents.html b/components/dialog/demo/dialog-fullscreen-in-iframe-contents.html
new file mode 100644
index 00000000000..c07a72aea3f
--- /dev/null
+++ b/components/dialog/demo/dialog-fullscreen-in-iframe-contents.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<script type="module">
+		import '../../typography/typography.js';
+		import '../../button/button.js';
+		import '../dialog-fullscreen.js';
+	</script>
+	<title>d2l-dialog-fullscreen (iframe contents)</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta charset="UTF-8">
+	<style>
+		body {
+			margin: 0;
+			padding: 30px;
+		}
+	</style>
+</head>
+<body class="d2l-typography">
+	<d2l-button id="open">Open Dialog</d2l-button>
+
+	<d2l-dialog-fullscreen id="dialogFullscreen" title-text="Fullscreen Title in Iframe" opened>
+		<p>This dialog is rendered inside an iframe that is smaller than the browser viewport. It uses the ifrau backdrop service to size itself to the iframe's available space rather than the full window.</p>
+		<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+		<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+		<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+		<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+		<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+		<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
+		<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+	</d2l-dialog-fullscreen>
+
+	<script>
+		document.querySelector('#open').addEventListener('click', () => {
+			document.querySelector('#dialogFullscreen').opened = true;
+		});
+		document.querySelector('#dialogFullscreen').addEventListener('d2l-dialog-close', (e) => {
+			console.log('dialog action:', e.detail.action);
+		});
+	</script>
+</body>
+</html>
diff --git a/components/dialog/demo/dialog-fullscreen-in-iframe.html b/components/dialog/demo/dialog-fullscreen-in-iframe.html
new file mode 100644
index 00000000000..e360b054513
--- /dev/null
+++ b/components/dialog/demo/dialog-fullscreen-in-iframe.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+		</script>
+		<style>
+			#iframe-container {
+				border: 2px dashed var(--d2l-color-celestine);
+				box-sizing: border-box;
+				height: 50vh;
+				margin: 30px 0;
+				overflow: hidden;
+				width: 100%;
+			}
+			#iframe-container iframe {
+				display: block;
+			}
+		</style>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="d2l-dialog-fullscreen (in iframe)">
+
+			<h2>Fullscreen Dialog inside a constrained iframe</h2>
+
+			<p>The dashed box below is a fixed-size iframe (smaller than the browser viewport) hosting a page that opens a <code>d2l-dialog-fullscreen</code>. This simulates the dialog being embedded in a product iframe that doesn't fill the whole window, relying on the ifrau backdrop service to size itself to the available iframe space.</p>
+
+			<div id="iframe-container"></div>
+
+			<script type="module">
+				import { Host } from 'ifrau/host.js';
+
+				const iframeSrc = new URL('./dialog-fullscreen-in-iframe-contents.html', window.location.href).href;
+				const iframeOrigin = new URL(iframeSrc).origin;
+
+				// the ifrau client posts this to detect whether it's running inside a frame
+				window.addEventListener('message', evt => {
+					if (!evt || evt.data !== 'isFramedRequest' || evt.origin !== iframeOrigin) return;
+					evt.source.postMessage({ isFramed: true }, iframeSrc);
+				});
+
+				(async() => {
+					const ifrauHost = new Host(
+						() => document.querySelector('#iframe-container'),
+						iframeSrc,
+						{ height: '100%' }
+					);
+
+					await ifrauHost.registerService('dialogWC', '0.1', {
+						// availableHeight matches the container, which is sized to half the viewport height
+						showBackdrop: () => ({ availableHeight: document.querySelector('#iframe-container').clientHeight, top: 0 }),
+						hideBackdrop: async() => {}
+					});
+					await ifrauHost.connect();
+				})();
+			</script>
+
+		</d2l-demo-page>
+
+	</body>
+</html>
diff --git a/index.html b/index.html
index 618b50f5eb3..69365387614 100644
--- a/index.html
+++ b/index.html
@@ -69,6 +69,7 @@ <h2 class="d2l-heading-3">Components</h2>
 				<li><a href="components/dialog/demo/dialog-nested.html">d2l-dialog (Nested)</a></li>
 				<li><a href="components/dialog/demo/dialog-confirm.html">d2l-dialog-confirm</a></li>
 				<li><a href="components/dialog/demo/dialog-fullscreen.html">d2l-dialog-fullscreen</a></li>
+				<li><a href="components/dialog/demo/dialog-fullscreen-in-iframe.html">d2l-dialog-fullscreen (iFramed)</a></li>
 			</ul>
 		</li>
 		<li>

From 79b891b9daab5b07d95a07c2bc46232647a8470f Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Wed, 16 Sep 2026 10:44:16 -0400
Subject: [PATCH 3/4] uses the getContextInfo exposed method from the ifrau
 service

---
 components/dialog/demo/dialog-fullscreen-in-iframe.html | 1 +
 components/dialog/dialog-mixin.js                       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/dialog/demo/dialog-fullscreen-in-iframe.html b/components/dialog/demo/dialog-fullscreen-in-iframe.html
index e360b054513..99fc0e61b8b 100644
--- a/components/dialog/demo/dialog-fullscreen-in-iframe.html
+++ b/components/dialog/demo/dialog-fullscreen-in-iframe.html
@@ -52,6 +52,7 @@ <h2>Fullscreen Dialog inside a constrained iframe</h2>
 
 					await ifrauHost.registerService('dialogWC', '0.1', {
 						// availableHeight matches the container, which is sized to half the viewport height
+						getContextInfo: () => ({ availableHeight: document.querySelector('#iframe-container').clientHeight, top: 0 }),
 						showBackdrop: () => ({ availableHeight: document.querySelector('#iframe-container').clientHeight, top: 0 }),
 						hideBackdrop: async() => {}
 					});
diff --git a/components/dialog/dialog-mixin.js b/components/dialog/dialog-mixin.js
index cc7436b5642..d007de920bd 100644
--- a/components/dialog/dialog-mixin.js
+++ b/components/dialog/dialog-mixin.js
@@ -185,7 +185,7 @@ export const DialogMixin = superclass => class extends superclass {
 	};
 
 	#updateSize = async() => {
-		if (this._inIframe && this.#ifrauDialogService) this._ifrauContextInfo = await this.#ifrauDialogService.showBackdrop();
+		if (this._inIframe && this.#ifrauDialogService) this._ifrauContextInfo = await this.#ifrauDialogService.getContextInfo();
 		if (this._autoSize) {
 			if (this._ifrauContextInfo) {
 				if (this._ifrauContextInfo.top > defaultMargin.top) {

From 32407e9be8448dd069bbfc328f0e483300c784a1 Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Wed, 16 Sep 2026 11:52:39 -0400
Subject: [PATCH 4/4] Adds the getContextInfo method to the service registered
 on the vdiff tests.

---
 components/dialog/test/dialog-ifrau.vdiff.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/dialog/test/dialog-ifrau.vdiff.js b/components/dialog/test/dialog-ifrau.vdiff.js
index e9d9f95c5f8..f7a483c3e96 100644
--- a/components/dialog/test/dialog-ifrau.vdiff.js
+++ b/components/dialog/test/dialog-ifrau.vdiff.js
@@ -34,6 +34,7 @@ describe('dialog-ifrau', () => {
 			);
 
 			await ifrauHost.registerService('dialogWC', '0.1', {
+				getContextInfo: () => ({ availableHeight: ifrau.availableHeight, top: ifrau.top }),
 				showBackdrop: () => {
 					return {
 						availableHeight: ifrau.availableHeight,