From dc3a7222a8231ae30654ce4e7de81f3fbd89d055 Mon Sep 17 00:00:00 2001
From: Stacey Van Herk <13419300+svanherk@users.noreply.github.com>
Date: Fri, 17 Jul 2026 18:08:13 -0400
Subject: [PATCH 1/2] GAUD-10314 - Simplify the z-index in POC

---
 components/page/page.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/page/page.js b/components/page/page.js
index 35c2ad43587..c253ff6cec9 100644
--- a/components/page/page.js
+++ b/components/page/page.js
@@ -118,7 +118,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 		.header {
 			position: relative;
-			z-index: 15; /* To be over sticky content of our core components */
+			z-index: 2; /* Ensures the header is over the divider */
 		}
 
 		.page.header-sticky .header {
@@ -139,6 +139,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 		main {
 			flex: 1;
+			isolation: isolate;
 			min-width: min(${MAIN_MIN_WIDTH}px, 100%);
 		}
 
@@ -160,6 +161,10 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			overflow: clip auto;
 		}
 
+		.divider {
+			z-index: 1; /* Ensures the divider is over the panels */
+		}
+
 		.footer:not([hidden]),
 		.floating-buttons-container {
 			display: inline;
@@ -170,7 +175,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			inset: auto 0 0;
 			padding-block-start: 0.75rem;
 			position: fixed;
-			z-index: 10; /* To be over sticky content of our core components */
+			z-index: 1; /* Ensures the footer is over the divider */
 		}
 		.footer-contents {
 			margin-inline: var(--d2l-page-margin-inline, 0);
@@ -187,6 +192,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		.page.legacy-browser-mode.header-sticky.has-panels .header {
 			flex: 0 0 auto;
 			position: static;
+			z-index: 15; /* To be over sticky content of our core components */
 		}
 		.page.legacy-browser-mode.has-panels .content {
 			flex: 1 1 auto;
@@ -211,6 +217,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		}
 		.page.legacy-browser-mode.has-panels .fixed-footer {
 			position: static;
+			z-index: 10; /* To be over sticky content of our core components */
 		}
 	`;
 

From 05dd038ed01e616a9e83b0119531160ff5f68d64 Mon Sep 17 00:00:00 2001
From: Stacey Van Herk <13419300+svanherk@users.noreply.github.com>
Date: Fri, 17 Jul 2026 18:54:49 -0400
Subject: [PATCH 2/2] Adjustments

---
 components/page/page.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/page/page.js b/components/page/page.js
index c253ff6cec9..da60de1a2bb 100644
--- a/components/page/page.js
+++ b/components/page/page.js
@@ -188,11 +188,13 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			flex-direction: column;
 			height: 100vh;
 		}
+		.page.legacy-browser-mode .header {
+			z-index: 16; /* To be over sticky content of our core components and divider */
+		}
 		.page.legacy-browser-mode.has-panels .header,
 		.page.legacy-browser-mode.header-sticky.has-panels .header {
 			flex: 0 0 auto;
 			position: static;
-			z-index: 15; /* To be over sticky content of our core components */
 		}
 		.page.legacy-browser-mode.has-panels .content {
 			flex: 1 1 auto;
@@ -201,6 +203,9 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			padding-bottom: 0;
 			width: 100%;
 		}
+		.page.legacy-browser-mode main {
+			isolation: auto;
+		}
 		.page.legacy-browser-mode.has-panels main {
 			min-height: 0;
 			overflow: auto;
@@ -212,12 +217,15 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			min-height: 0;
 			position: static;
 		}
+		.page.legacy-browser-mode .divider {
+			z-index: 15; /* To be over sticky content of our core components */
+		}
 		.page.legacy-browser-mode.has-panels .footer {
 			flex: 0 0 auto;
 		}
 		.page.legacy-browser-mode.has-panels .fixed-footer {
 			position: static;
-			z-index: 10; /* To be over sticky content of our core components */
+			z-index: 15; /* To be over sticky content of our core components and divider */
 		}
 	`;