From 81c15c9c6ce20f8ba7e06bfe61477c2ec24ca084 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 21 Aug 2023 14:17:55 +0200
Subject: [PATCH] Fix layout shifts caused by early rendering passes

The previous CSS code relied on `.content:not(:last-child)` to reserve the space required for the right sidebar.

This selector does not work as expected when the browser does an early rendering pass while the `.content` block is still open. It causes the space for the sidebar to be reserved but once the parsing continues the browser realizes that there is no sidebar (=`.content` is the last child) and layout is visually updated.

See https://www.woltlab.com/community/thread/301233-template-list-behavior-when-sorting-results/
---
 com.woltlab.wcf/templates/footer.tpl          | 45 ++-----------------
 com.woltlab.wcf/templates/header.tpl          | 39 +++++++++++++++-
 .../install/files/style/layout/layout.scss    | 11 +++--
 3 files changed, 47 insertions(+), 48 deletions(-)

diff --git a/com.woltlab.wcf/templates/footer.tpl b/com.woltlab.wcf/templates/footer.tpl
index 1139f44d8b..5977933dee 100644
--- a/com.woltlab.wcf/templates/footer.tpl
+++ b/com.woltlab.wcf/templates/footer.tpl
@@ -20,51 +20,14 @@
 					{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.footer.content')}
 				{/if}
 			</div>
-				
-			{capture assign='__sidebarRightContent'}
-				{event name='boxesSidebarRightTop'}
-				
-				{* WCF2.1 Fallback *}
-				{if !$sidebar|empty}
-					{if !$sidebarOrientation|isset || $sidebarOrientation == 'right'}
-						{@$sidebar}
-					{/if}
-				{/if}
-				
-				{if !$sidebarRight|empty}
-					{@$sidebarRight}
-				{/if}
-				
-				{foreach from=$__wcf->getBoxHandler()->getBoxes('sidebarRight') item=box}
-					{@$box->render()}
-				{/foreach}
-				
-				{event name='boxesSidebarRightBottom'}
-			{/capture}
-				
-			{if $__sidebarRightContent|trim}
+			
+			{hascontent}
 				<aside class="sidebar boxesSidebarRight" aria-label="{lang}wcf.page.sidebar.right{/lang}">
 					<div class="boxContainer">
-						{if MODULE_WCF_AD && $__disableAds|empty && $__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}
-							<div class="box boxBorderless">
-								<div class="boxContent">
-									{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}
-								</div>
-							</div>
-						{/if}
-							
-						{@$__sidebarRightContent}	
-						
-						{if MODULE_WCF_AD && $__disableAds|empty && $__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}
-							<div class="box boxBorderless">
-								<div class="boxContent">
-									{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}
-								</div>
-							</div>
-						{/if}
+						{content}{@$__sidebarRightContent}{/content}
 					</div>
 				</aside>
-			{/if}
+			{/hascontent}
 		</div>
 	</section>
 	
diff --git a/com.woltlab.wcf/templates/header.tpl b/com.woltlab.wcf/templates/header.tpl
index b9839e5d68..90db1ed7f9 100644
--- a/com.woltlab.wcf/templates/header.tpl
+++ b/com.woltlab.wcf/templates/header.tpl
@@ -104,8 +104,45 @@
 					</div>
 				</aside>
 			{/hascontent}
+
+			{capture assign='__sidebarRightContent'}
+				{if MODULE_WCF_AD && $__disableAds|empty && $__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}
+					<div class="box boxBorderless">
+						<div class="boxContent">
+							{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}
+						</div>
+					</div>
+				{/if}
+				
+				{event name='boxesSidebarRightTop'}
+				
+				{* WCF2.1 Fallback *}
+				{if !$sidebar|empty}
+					{if !$sidebarOrientation|isset || $sidebarOrientation == 'right'}
+						{@$sidebar}
+					{/if}
+				{/if}
+				
+				{if !$sidebarRight|empty}
+					{@$sidebarRight}
+				{/if}
+				
+				{foreach from=$__wcf->getBoxHandler()->getBoxes('sidebarRight') item=box}
+					{@$box->render()}
+				{/foreach}
+				
+				{event name='boxesSidebarRightBottom'}
+
+				{if MODULE_WCF_AD && $__disableAds|empty && $__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}
+					<div class="box boxBorderless">
+						<div class="boxContent">
+							{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}
+						</div>
+					</div>
+				{/if}
+			{/capture}
 			
-			<div id="content" class="content">
+			<div id="content" class="content{if $__sidebarRightContent|trim} content--sidebar-right{/if}">
 				{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.header.content')}{/if}
 				
 				{if $__disableContentHeader|empty}
diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index d504e577e5..0bc7e12c67 100644
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -110,14 +110,13 @@ html.iOS select {
 	.content {
 		flex: 1 1 0px;
 
-		// sidebar follows
-		&:not(:last-child) {
+		&.content--sidebar-right {
 			flex-basis: calc(100% - 340px);
-			max-width: calc(100% - 340px); // IE fix
-		}
+			max-width: calc(100% - 340px);
 
-		& + .sidebar {
-			margin-left: 30px;
+			& + .sidebar {
+				margin-left: 30px;
+			}
 		}
 	}
 
-- 
2.20.1