From a0acc0f6538848830b28d192677db65b72802cab Mon Sep 17 00:00:00 2001
From: Matheus Zych <mzych@databay.de>
Date: Fri, 23 Jan 2026 12:49:14 +0100
Subject: [PATCH] Moves html footer element outside the main element making it
 its sibling element

---
 .../js/src/components/page/ui/page-ui.js      |  2 +-
 .../components/paragraph/ui/tiny-wrapper.js   |  2 +-
 .../templates/default/tpl.notes_list.html     |  2 +-
 .../default/Layout/tpl.standardpage.html      | 19 +++++++------
 .../Layout/Page/StandardPageTest.php          | 28 ++++++++++++-------
 .../Layout/_ui-component_standardpage.scss    |  2 +-
 6 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/components/ILIAS/COPage/Editor/js/src/components/page/ui/page-ui.js b/components/ILIAS/COPage/Editor/js/src/components/page/ui/page-ui.js
index 3eec2f890956..cccc06435606 100755
--- a/components/ILIAS/COPage/Editor/js/src/components/page/ui/page-ui.js
+++ b/components/ILIAS/COPage/Editor/js/src/components/page/ui/page-ui.js
@@ -538,7 +538,7 @@ export default class PageUI {
       droppableSelector = '.il_droparea';
     }
 
-    const mainElement = document.querySelector('main.il-layout-page-content');
+    const mainElement = document.querySelector('.il-layout-page-content');
 
     function autoScroll(event) {
       const rect = mainElement.getBoundingClientRect();
diff --git a/components/ILIAS/COPage/Editor/js/src/components/paragraph/ui/tiny-wrapper.js b/components/ILIAS/COPage/Editor/js/src/components/paragraph/ui/tiny-wrapper.js
index aa390ff7e560..f4311f6f31c1 100755
--- a/components/ILIAS/COPage/Editor/js/src/components/paragraph/ui/tiny-wrapper.js
+++ b/components/ILIAS/COPage/Editor/js/src/components/paragraph/ui/tiny-wrapper.js
@@ -883,7 +883,7 @@ export default class TinyWrapper {
   // scrolls position of editor under editor menu
   autoScroll() {
     const tiny_el = document.getElementById('tinytarget_div');
-    const content_el = document.querySelector('main.il-layout-page-content');
+    const content_el = document.querySelector('.il-layout-page-content');
     const tiny_rect = tiny_el.getBoundingClientRect();
 
     let scroll = false;
diff --git a/components/ILIAS/Notes/templates/default/tpl.notes_list.html b/components/ILIAS/Notes/templates/default/tpl.notes_list.html
index 90d43f1d73e1..636243821455 100755
--- a/components/ILIAS/Notes/templates/default/tpl.notes_list.html
+++ b/components/ILIAS/Notes/templates/default/tpl.notes_list.html
@@ -6,7 +6,7 @@
         div.il-filter form.il-standard-form {
             display:none;
         }
-        main.il-layout-page-content {
+        .il-layout-page-content {
             overflow:hidden;
         }
     }
diff --git a/components/ILIAS/UI/src/templates/default/Layout/tpl.standardpage.html b/components/ILIAS/UI/src/templates/default/Layout/tpl.standardpage.html
index 54fbaf406740..1dea7873a12e 100755
--- a/components/ILIAS/UI/src/templates/default/Layout/tpl.standardpage.html
+++ b/components/ILIAS/UI/src/templates/default/Layout/tpl.standardpage.html
@@ -65,18 +65,19 @@
 			{MAINBAR}
 		</div>
 
-		<!-- html5 main-tag is not supported in IE / div is needed -->
-		<main class="il-layout-page-content">
-			<!-- BEGIN content_breadcrumbs -->
-			<div class="breadcrumbs">
-				{BREADCRUMBS}
-			</div>
-			<!-- END content_breadcrumbs -->
+		<div class="il-layout-page-content">
+			<main>
+				<!-- BEGIN content_breadcrumbs -->
+				<div class="breadcrumbs">
+					{BREADCRUMBS}
+				</div>
+				<!-- END content_breadcrumbs -->
 
-			{CONTENT}
+				{CONTENT}
+			</main>
 
 			{FOOTER}
-		</main>
+		</div>
 	</div>
 
 <!-- BEGIN js_file -->
diff --git a/components/ILIAS/UI/tests/Component/Layout/Page/StandardPageTest.php b/components/ILIAS/UI/tests/Component/Layout/Page/StandardPageTest.php
index 48ce6b4a3f59..ffe72147f460 100755
--- a/components/ILIAS/UI/tests/Component/Layout/Page/StandardPageTest.php
+++ b/components/ILIAS/UI/tests/Component/Layout/Page/StandardPageTest.php
@@ -280,7 +280,9 @@ public function testRenderingWithTitle(): void
         </header>
         <div class="il-system-infos"></div>
         <div class="nav il-maincontrols">MainBar Stub</div>
-        <main class="il-layout-page-content">some content</main>
+        <div class="il-layout-page-content">
+            <main>some content</main>
+        </div>
     </div>
     <script>il.Util.addOnLoad(function() {});</script>
 </body>
@@ -326,7 +328,9 @@ public function testRenderingWithRtlLanguage(): void
         </header>
         <div class="il-system-infos"></div>
         <div class="nav il-maincontrols">MainBar Stub</div>
-        <main class="il-layout-page-content">some content</main>
+        <div class="il-layout-page-content">
+            <main>some content</main>
+        </div>
     </div>
     <script>il.Util.addOnLoad(function() {});</script>
 </body>
@@ -379,7 +383,9 @@ public function testRenderingWithMetaData(): void
         </header>
         <div class="il-system-infos"></div>
         <div class="nav il-maincontrols">MainBar Stub</div>
-        <main class="il-layout-page-content">some content</main>
+        <div class="il-layout-page-content">
+            <main>some content</main>
+        </div>
     </div>
     <script>il.Util.addOnLoad(function() {});</script>
 </body>
@@ -467,13 +473,15 @@ public function testRenderingWithCrumbs(): void
         </header>
         <div class="il-system-infos"></div>
         <div class="nav il-maincontrols">MainBar Stub</div>
-        <main class="il-layout-page-content">
-                <div class="breadcrumbs">
-                    <nav aria-label="breadcrumbs_aria_label" class="breadcrumb_wrapper">
-                        <div class="breadcrumb"><span class="crumb"><a href="#">label1</a></span><span class="crumb"><a href="#">label2</a></span><span class="crumb"><a href="#">label3</a></span></div>
-                    </nav>
-                </div>some content
-        </main>
+        <div class="il-layout-page-content">
+            <main>
+                    <div class="breadcrumbs">
+                        <nav aria-label="breadcrumbs_aria_label" class="breadcrumb_wrapper">
+                            <div class="breadcrumb"><span class="crumb"><a href="#">label1</a></span><span class="crumb"><a href="#">label2</a></span><span class="crumb"><a href="#">label3</a></span></div>
+                        </nav>
+                    </div>some content
+            </main>
+        </div>
     </div>
     <script>il.Util.addOnLoad(function() {});</script>
 </body>
diff --git a/templates/default/070-components/UI-framework/Layout/_ui-component_standardpage.scss b/templates/default/070-components/UI-framework/Layout/_ui-component_standardpage.scss
index b88d2f4abad7..1d164fb5ecf6 100755
--- a/templates/default/070-components/UI-framework/Layout/_ui-component_standardpage.scss
+++ b/templates/default/070-components/UI-framework/Layout/_ui-component_standardpage.scss
@@ -450,7 +450,7 @@ main {
 		flex-direction: column;
 		min-height: calc(100vh -  $il-standard-page-small-header-height);
 		padding-bottom: $il-standard-page-small-mainbar-height;
-		> div {
+		> main {
 			flex-grow: 1;
 		}
 	}