From 2e095bd066fd701cfde9bb501350ed5367012c53 Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Tue, 6 Dec 2022 17:40:03 -0600
Subject: [PATCH] Simplify grid styles now that grid is no longer needed to
 position ToC

Bug: T318013
Change-Id: Id2dda853c18673ee98ca674128f5da5aa8370cc4
---
 .../skins.vector.styles/layouts/grid.less     | 46 +++++++------------
 1 file changed, 17 insertions(+), 29 deletions(-)

diff --git a/resources/skins.vector.styles/layouts/grid.less b/resources/skins.vector.styles/layouts/grid.less
index e4d460bf5..e0e10529d 100644
--- a/resources/skins.vector.styles/layouts/grid.less
+++ b/resources/skins.vector.styles/layouts/grid.less
@@ -2,8 +2,6 @@
 // Grid layout
 //
 
-@width-sidebar-end: unit( 185px / @font-size-browser, em );
-
 // Match styles between TOC and fade element to ensure the fade covers the correct area
 // This is expressed in pixels to support different font sizes since our layout is currently
 // expressed in pixels. See T313817.
@@ -70,14 +68,6 @@
 	}
 }
 
-.mixin-horizontally-centered() {
-	grid-column: mainMenu / pageContent;
-	margin-left: auto;
-	margin-right: auto;
-	width: 100%;
-	box-sizing: border-box;
-}
-
 .mw-content-container,
 .mw-table-of-contents-container {
 	.vector-feature-page-tools-disabled & {
@@ -100,28 +90,26 @@
 	}
 }
 
-// Our usage of grid to position the ToC when it is collapsed in the page title
-// requires us to manually define the max width depending on the number of columns.
-// This also requires us to define a set width for the sidebar end column
-// FIXME: Remove this max-width mess with T318013
-@{selector-sidebar-no-toc-sidebar-closed} ~ .mw-content-container {
-	.mixin-horizontally-centered();
-	max-width: @max-width-content-container;
-
-	.vector-feature-page-tools-enabled.vector-feature-page-tools-pinned-enabled & {
-		max-width: @max-width-content-container + @width-sidebar-end;
+// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
+.vector-feature-page-tools-disabled {
+	@{selector-sidebar-no-toc-sidebar-closed},
+	&.vector-toc-unpinned @{selector-main-menu-closed} {
+		& ~ .mw-content-container {
+			grid-column: mainMenu / pageContent;
+			margin-left: auto;
+			margin-right: auto;
+			width: 100%;
+		}
 	}
 }
 
-.vector-toc-unpinned @{selector-main-menu-closed} {
-	& ~ .mw-content-container,
-	& ~ .mw-table-of-contents-container {
-		.mixin-horizontally-centered();
-		max-width: @max-width-content-container;
-
-		.vector-feature-page-tools-enabled.vector-feature-page-tools-pinned-enabled& {
-			max-width: @max-width-content-container + @width-sidebar-end;
-		}
+// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
+.vector-feature-page-tools-enabled {
+	&.vector-main-menu-unpinned .vector-sidebar-container-no-toc ~ .mw-content-container,
+	&.vector-toc-unpinned.vector-main-menu-unpinned .mw-content-container {
+		grid-column: mainMenu / pageContent;
+		margin-left: auto;
+		margin-right: auto;
 	}
 }