From 058dea12b912c49a8d425b12be110075480dd599 Mon Sep 17 00:00:00 2001
From: Stacey Van Herk <13419300+svanherk@users.noreply.github.com>
Date: Mon, 13 Jul 2026 17:01:31 -0400
Subject: [PATCH] Consumer tries to set correct height

---
 .../page/demo/page-component-comms-app.js     | 100 ++++++++++++++++++
 components/page/demo/page-test-comms-app.html |  16 +++
 index.html                                    |   1 +
 3 files changed, 117 insertions(+)
 create mode 100644 components/page/demo/page-component-comms-app.js
 create mode 100644 components/page/demo/page-test-comms-app.html

diff --git a/components/page/demo/page-component-comms-app.js b/components/page/demo/page-component-comms-app.js
new file mode 100644
index 00000000000..4e6143f0a54
--- /dev/null
+++ b/components/page/demo/page-component-comms-app.js
@@ -0,0 +1,100 @@
+import '../../button/button-icon.js';
+import '../../button/button.js';
+import '../../inputs/input-text.js';
+import '../page.js';
+import '../page-header-immersive.js';
+import '../page-main.js';
+import '../page-side-nav.js';
+import { css, html, LitElement } from 'lit';
+
+class PageDemoCommsApp extends LitElement {
+
+	static properties = {
+		_messages: { state: true }
+	};
+
+	static styles = css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+
+        .wrapper {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            min-height: calc(100vh - var(--d2l-page-header-height-measured) - 70px - 75px); /* sticky header is 70px and input box is 75px */
+            justify-content: end;
+        }
+
+        .messages {
+            display: flex;
+            flex-direction: column;
+            gap: 0.4rem;
+        }
+
+        .message {
+            background-color: var(--d2l-color-celestine);
+            border-radius: 0.25rem;
+            color: #ffffff;
+            padding: 0.5rem;
+        }
+
+        .anchor {
+            align-items: center;
+            background-color: white;
+            bottom: 0;
+            display: flex;
+            gap: 0.5rem;
+            height: 75px;
+            position: sticky;
+        }
+	`;
+
+	constructor() {
+		super();
+		this._messages = ['Hello there!', 'Press Send!', 'To Add More Messages!'];
+	}
+
+	render() {
+		return html`
+			<d2l-page width-type="fullscreen">
+				<d2l-page-header-immersive slot="header" title-text="Messages">
+					<d2l-button-icon slot="actions" icon="tier1:edit" text="Compose"></d2l-button-icon>
+					<d2l-button-icon slot="actions" icon="tier1:more" text="More options"></d2l-button-icon>
+				</d2l-page-header-immersive>
+
+				<d2l-page-side-nav slot="side-nav">
+					<d2l-button slot="header-start" primary>New Message</d2l-button>
+					<d2l-button-icon slot="header-end" icon="tier1:gear" text="Folder settings"></d2l-button-icon>
+					Conversations go here
+				</d2l-page-side-nav>
+
+				<d2l-page-main>
+					<div slot="header-start">Conversation</div>
+                    <d2l-button-icon slot="header-end" icon="tier1:search" text="Search"></d2l-button-icon>
+                    <div class="wrapper">
+                        <div class="messages">
+                            ${this._messages.map(message => html`
+                                <div class="message">${message}</div>
+                            `)}
+                        </div>
+                        <div class="anchor">
+                            <d2l-input-text label="Message" label-hidden placeholder="Type a message…"></d2l-input-text>
+                            <d2l-button primary @click="${this._addMessage}">Send</d2l-button>
+                        </div>
+                    </div>
+				</d2l-page-main>
+			</d2l-page>
+		`;
+	}
+
+	_addMessage() {
+		this._messages = [...this._messages, 'Another!'];
+	}
+
+}
+
+customElements.define('d2l-page-demo-comms-app', PageDemoCommsApp);
diff --git a/components/page/demo/page-test-comms-app.html b/components/page/demo/page-test-comms-app.html
new file mode 100644
index 00000000000..f2cdef57f3d
--- /dev/null
+++ b/components/page/demo/page-test-comms-app.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>d2l-page</title>
+		<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';
+			import './page-component-comms-app.js';
+		</script>
+	</head>
+	<body>
+		<d2l-page-demo-comms-app></d2l-page-demo-comms-app>
+	</body>
+</html>
diff --git a/index.html b/index.html
index 308a86ec196..fac10bb88bf 100644
--- a/index.html
+++ b/index.html
@@ -154,6 +154,7 @@ <h2 class="d2l-heading-3">Components</h2>
 		<li><a href="components/object-property-list/demo/object-property-list.html">d2l-object-property-list</a></li>
 		<li><a href="components/offscreen/demo/offscreen.html">d2l-offscreen</a></li>
 		<li><a href="components/page/demo/page.html">d2l-page</a></li>
+		<li><a href="components/page/demo/page-test-comms-app.html">d2l-page (comms app)</a></li>
 		<li><a href="components/progress/demo/progress.html">d2l-progress</a></li>
 		<li><a href="components/overflow-group/demo/overflow-group.html">d2l-overflow-group</a></li>
 		<li><a href="components/paging/demo/pager-load-more.html">d2l-pager-load-more</a></li>