diff --git a/resources/common/variables.less b/resources/common/variables.less
index f5f544d00..0afad0cf0 100644
--- a/resources/common/variables.less
+++ b/resources/common/variables.less
@@ -64,6 +64,8 @@
 
 @size-icon: unit( 20 / @font-size-browser, em );
 @size-indicator: unit( 12 / @font-size-browser, em );
+// Copied from mediawiki.ui.icons
+@icon-padding-md: unit( 12 / @font-size-browser, em );
 
 @background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
 @background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less
index 07900cd18..e132dcbff 100644
--- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less
+++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less
@@ -4,30 +4,29 @@
 
 #vector-toc-collapsed-button {
 	display: none;
+	float: left;
+	margin-right: 4px;
+	margin-left: -@icon-padding-md;
+	// Reduce padding to fit with page title
+	padding: 7px 10px 7px 10px;
+	// Override background color for when the TOC is overlaps content
+	// as a sticky element when the page is scrolled down.
+	background-color: @background-color-base;
+
+	&:hover,
+	&:active {
+		background-color: @colorGray15;
+	}
 }
 
-@media ( max-width: @max-width-tablet ) {
-	#vector-toc-collapsed-button,
-	.sidebar-toc {
-		z-index: @z-index-menu;
-	}
+#vector-toc-collapsed-button,
+.sidebar-toc {
+	z-index: @z-index-menu;
+}
 
+.mixin-collapse-toc-page-title {
 	#vector-toc-collapsed-button {
 		display: block;
-		float: left;
-		margin-right: 4px;
-		margin-left: -10px;
-		// Reduce padding to fit with page title
-		padding: 7px 10px 7px 10px;
-
-		// Override background color for when the TOC is overlaps content
-		// as a sticky element when the page is scrolled down.
-		background-color: @background-color-base;
-
-		&:hover,
-		&:active {
-			background-color: @colorGray15;
-		}
 	}
 
 	.mw-table-of-contents-container {
@@ -59,6 +58,10 @@
 		// Hide the TOC when the button is not checked
 		display: none;
 	}
+}
+
+@media ( max-width: @max-width-tablet ) {
+	.mixin-collapse-toc-page-title();
 
 	.vector-below-page-title {
 		#vector-toc-collapsed-button,
@@ -79,3 +82,19 @@
 		}
 	}
 }
+
+@media ( min-width: @min-width-desktop ) {
+	@supports ( display: grid ) {
+		.vector-toc-collapsed .vector-layout-grid {
+			.mixin-collapse-toc-page-title();
+
+			.mw-table-of-contents-container {
+				grid-area: content;
+			}
+
+			.sidebar-toc {
+				left: -@icon-padding-md;
+			}
+		}
+	}
+}