From d5cb58b3f07d55285cf7b3192907b56a59da8e27 Mon Sep 17 00:00:00 2001
From: Nicholas Ray <nray@wikimedia.org>
Date: Mon, 13 Jul 2020 13:12:53 -0600
Subject: [PATCH] Max-Width Layout: Make footer width match content width to
 avoid overlap with sidebar

* `mw-content-container` now wraps the footer (as well as the content)
because we want the footer to match the content width at all times and
to expand with the content when the sidebar is closed (at small viewport
widths or when on history/special pages)

* `mw-footer-container` margins were replaced with padding to avoid
issues with margin collapsing.

* Applied a white background to sidebar to handle the case of the
sidebar overflowing the `mw-page-container`. When that happens, we at
least want the text in the sidebar to be legible.

* Closely related, `mw-page-container`'s `overflow: hidden` style was
removed to prevent `mw-page-container` from cutting off the sidebar. The
purpose of this style was make it appear as if the sidebar was being
hidden by `mw-page-container`, but tweaking the sidebar's translation
animation to achieves this effect as well.

Bug: T257518
Change-Id: I89edf89b2ac4abe2053f0c9b366f143133ff420f
---
 includes/templates/skin.mustache              |  4 +++-
 .../skins.vector.styles/layout-max-width.less | 21 ++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index 8d26205..9bc6a36 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -123,7 +123,9 @@
 </div>
 
 <div class="mw-workspace-container mw-footer-container">
-	{{#data-footer}}{{>Footer}}{{/data-footer}}
+	<div class="mw-content-container">
+		{{#data-footer}}{{>Footer}}{{/data-footer}}
+	</div>
 </div>
 	</div> {{! END mw-page-container-inner }}
 </div> {{! END mw-page-container }}
diff --git a/resources/skins.vector.styles/layout-max-width.less b/resources/skins.vector.styles/layout-max-width.less
index 51a2925..d9fc895 100644
--- a/resources/skins.vector.styles/layout-max-width.less
+++ b/resources/skins.vector.styles/layout-max-width.less
@@ -99,7 +99,8 @@
 	}
 
 	.mw-footer {
-		padding: 0;
+		border-top: @border-base;
+		padding: 32px 0 0 0;
 	}
 
 	// Container logic.
@@ -109,7 +110,6 @@
 		margin-left: auto;
 		margin-right: auto;
 		padding: 0 @padding-horizontal-page-container;
-		overflow: hidden;
 		background-color: @background-color-page-container;
 	}
 
@@ -144,10 +144,8 @@
 	}
 
 	.mw-footer-container {
-		margin-top: 50px;
-		margin-bottom: 50px;
-		padding: 32px 0;
-		border-top: @border-base;
+		padding-top: 50px;
+		padding-bottom: 82px;
 	}
 
 	// For container logic specific to special pages and history pages.
@@ -173,6 +171,15 @@
 		}
 	}
 
+	// We want it to appear like the sidebar is going into/coming out of
+	// `.mw-page-container`, but we can't use `overflow: hidden` on
+	// `.mw-page-container` because that will cut off the sidebar. Therefore, we
+	// calculate the maximum distance from the start of `mw-page-container` to the
+	// start of the sidebar.
+	#mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar {
+		.transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) );
+	}
+
 	// Responsive overrides.
 	@media ( min-width: @min-width-page-container--padded ) {
 		@border-color: @border-color-sidebar;
@@ -198,7 +205,7 @@
 
 	@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
 		#mw-panel {
-			background: none;
+			background: @background-color-page-container;
 			border-right: 1px solid @border-color-sidebar;
 		}
 	}