From 5beadc4bc2399ca0d029e97918e4b4fed3b0bb9b Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Mon, 13 Jun 2022 14:07:36 -0700
Subject: [PATCH] Layout: Don't hide footer < 1000px when sidebar closed

The 'mw-workspace-container' class is present on both
the footer and the sidebar. The CSS rule should only hide
the latter.

When there is no table of contents on the page, and the sidebar
is closed, the content
should always span the grid columns and the sidebar container
closed.

Bug: T293443
Change-Id: I852b9024fbd21339b7c78dbb4deba811ab17c7e7
---
 includes/templates/skin.mustache              |  2 +-
 .../skins.vector.styles/layouts/grid.less     | 30 +++++++++++++++----
 .../skins.vector.styles/layouts/screen.less   |  2 ++
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index 7aae087b..acad1e56 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -43,7 +43,7 @@
 
 {{>Header}}
 
-<div class="mw-workspace-container vector-sidebar-container">
+<div class="mw-workspace-container vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
 	{{#data-toc}}
 	<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
 	{{/data-toc}}
diff --git a/resources/skins.vector.styles/layouts/grid.less b/resources/skins.vector.styles/layouts/grid.less
index d3d42f06..7557b022 100644
--- a/resources/skins.vector.styles/layouts/grid.less
+++ b/resources/skins.vector.styles/layouts/grid.less
@@ -2,6 +2,14 @@
 // Grid layout
 //
 
+.mixin-column-full-width() {
+	grid-column: sidebar / content;
+	margin-left: auto;
+	margin-right: auto;
+	// Needed for minimal content e.g. one word articles.
+	width: 100%;
+}
+
 .vector-layout-grid {
 	@media ( max-width: @width-breakpoint-tablet ) {
 		.mw-header {
@@ -50,16 +58,26 @@
 		}
 	}
 
-	/* Special handling for sidebar when table of contents is visible */
+	/**
+	 * Special handling for sidebar when table of contents is visible.
+	 * Cover the cases where:
+	 * 1) the main menu is closed, there is no TOC in the sidebar
+	 * 2) the main menu is closed, the sidebar TOC is hidden at the breakpoint.
+	 * In these situation content should span the entire page.
+	 */
 	@media ( max-width: @width-breakpoint-desktop ) {
-		@{selector-workspace-container-sidebar-closed} {
-			.mw-navigation {
-				display: none;
-			}
+		@{selector-sidebar-container-sidebar-closed} {
+			display: none;
 
 			& + .mw-content-container {
-				grid-column: sidebar / content;
+				.mixin-column-full-width();
 			}
 		}
 	}
+
+	@{selector-sidebar-no-toc-sidebar-closed} {
+		& + .mw-content-container {
+			.mixin-column-full-width();
+		}
+	}
 }
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index ca246a9b..528fbb94 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -10,6 +10,8 @@
 
 @selector-workspace-container-sidebar-open: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container';
 @selector-workspace-container-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-workspace-container';
+@selector-sidebar-container-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .vector-sidebar-container';
+@selector-sidebar-no-toc-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc';
 
 // Sidebar
 @width-grid-column-one: 11em;