diff --git a/resources/common/variables.less b/resources/common/variables.less
index 056445546..551e08088 100644
--- a/resources/common/variables.less
+++ b/resources/common/variables.less
@@ -113,9 +113,12 @@
 @margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
 
 // Sidebar
-@margin-toc-start-content: 18.5em;
-@space-end-sidebar: 3.25em;
-@width-sidebar: @margin-toc-start-content - @space-end-sidebar;
+@width-sidebar-px: 220;
+@width-sidebar-px-wide: 244;
+@margin-toc-start-content: unit( ( @width-sidebar-px + 24 ) / @font-size-browser, em );
+@margin-toc-start-content-wide: unit( ( @width-sidebar-px-wide + 52 ) / @font-size-browser, em ); // 18.5em;
+@width-sidebar: unit( @width-sidebar-px / @font-size-browser, em );
+@width-sidebar-wide: unit( @width-sidebar-px-wide / @font-size-browser, em );
 
 // Search
 @min-width-search-button: 28px;
@@ -172,4 +175,5 @@
 // Layout
 //
 @max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
-@padding-horizontal-page-container: unit( 40px / @font-size-browser, em ); // 1.875em @ 16
+@padding-horizontal-page-container: unit( 32px / @font-size-browser, em );
+@padding-horizontal-page-container-wide: unit( 40px / @font-size-browser, em );
diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less
index 63472b0ad..13db5b0e6 100644
--- a/resources/skins.vector.styles/components/Sidebar.less
+++ b/resources/skins.vector.styles/components/Sidebar.less
@@ -34,14 +34,25 @@
 		// Temporary magic number, will be calculated after TOC specs are finalized
 		padding: 12px 19px 12px 9px;
 		margin-top: @top-margin-sidebar-content;
-		margin-left: @margin-start-sidebar-content;
 		background-image: none;
 		background-color: @border-color-sidebar;
+
+		@media ( min-width: @width-breakpoint-desktop-wide ) {
+			width: @width-sidebar-wide;
+		}
 	}
 
 	.sidebar-toc {
 		margin-top: @top-margin-sidebar-toc_title_inline;
-		margin-left: @margin-start-sidebar-content;
+	}
+
+	.mw-sidebar,
+	.sidebar-toc {
+		margin-left: 0;
+
+		@media ( min-width: @width-breakpoint-desktop-wide ) {
+			margin-left: @margin-start-sidebar-content;
+		}
 	}
 
 	// T305069 Apply different top spacing to the topmost sidebar element during menu toggling when sidebar is open.
diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less
index f042a165a..254330e3f 100644
--- a/resources/skins.vector.styles/components/StickyHeader.less
+++ b/resources/skins.vector.styles/components/StickyHeader.less
@@ -13,7 +13,6 @@
 	transition: @transition-sticky-header;
 	display: flex;
 	align-items: center;
-	max-width: @max-width-page-container + @padding-horizontal-page-container + @padding-horizontal-page-container;
 	margin: 0 auto;
 	background: @background-color-base;
 	background-color: #fffffff7;
@@ -25,6 +24,12 @@
 
 	@media ( min-width: @width-breakpoint-desktop ) {
 		padding: 6px 25px;
+		max-width: @max-width-page-container + ( @padding-horizontal-page-container * 2 );
+	}
+
+	@media ( min-width: @width-breakpoint-desktop-wide ) {
+		padding: 6px 25px;
+		max-width: @max-width-page-container + ( @padding-horizontal-page-container-wide * 2 );
 	}
 
 	// T298836 Hide the sticky header at lower resolutions.
diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less
index fd2a12b02..71f0cef41 100644
--- a/resources/skins.vector.styles/components/TableOfContents.less
+++ b/resources/skins.vector.styles/components/TableOfContents.less
@@ -1,6 +1,5 @@
 @import '../../common/variables.less';
 
-@subcategory-padding: 8px;
 @fade-height: 40px;
 @vertical-padding: 20px;
 @toggle-icon-size: 1.834em;
@@ -9,11 +8,16 @@
 	display: none;
 	width: @width-sidebar;
 	max-height: 75vh;
-	padding: @vertical-padding @subcategory-padding @vertical-padding ~'calc( @{subcategory-padding} * 4 )';
+	padding: @vertical-padding 12px @vertical-padding 32px;
 	.box-sizing( border-box );
 	overflow: auto;
 	background-color: @border-color-sidebar;
 
+	@media ( min-width: @width-breakpoint-desktop-wide ) {
+		width: @width-sidebar-wide;
+		padding-right: 8px;
+	}
+
 	.sidebar-toc-header {
 		padding-bottom: 12px;
 	}
@@ -45,7 +49,7 @@
 	}
 
 	.sidebar-toc-text {
-		padding: ~'calc( @{subcategory-padding} / 2 )'  0;
+		padding: 4px  0;
 	}
 
 	.sidebar-toc-contents,
@@ -63,7 +67,7 @@
 		display: block;
 		position: relative;
 		list-style-type: none;
-		padding-left: @subcategory-padding;
+		padding-left: 8px;
 
 		a {
 			font-size: @font-size-base;
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index b7c0fb221..47d5164eb 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -57,7 +57,7 @@
 // smaller and will start horizontal scrolling instead.
 @min-width-supported:
 	unit( 500px / @font-size-browser, em ) -
-	( 2 * @padding-horizontal-page-container );
+	( 2 * @padding-horizontal-page-container-wide );
 // 31.25em - 3.75em = 27.5em @ 16
 @border-color-sidebar: @background-color-secondary--modern;
 @background-color-secondary--modern: #f8f9fa;
@@ -155,6 +155,10 @@ body {
 	// sidebar is flush with the edge of the screen at small widths.
 	left: -@padding-horizontal-page-container;
 	z-index: @z-index-sidebar;
+
+	@media ( min-width: @width-breakpoint-desktop-wide ) {
+		left: -@padding-horizontal-page-container-wide;
+	}
 }
 
 // Update positioning when TOC is enabled
@@ -207,6 +211,16 @@ body {
 	// For devices too small, they should be more useable with horizontal scrolling.
 	// e.g. Portrait on an iPad
 	min-width: @min-width-supported;
+
+	@media ( min-width: @width-breakpoint-desktop ) {
+		padding-left: @padding-horizontal-page-container;
+		padding-right: @padding-horizontal-page-container;
+	}
+
+	@media ( min-width: @width-breakpoint-desktop-wide ) {
+		padding-left: @padding-horizontal-page-container-wide;
+		padding-right: @padding-horizontal-page-container-wide;
+	}
 }
 
 .skin--responsive .mw-page-container {
@@ -287,13 +301,6 @@ body {
 	}
 }
 
-// Increase margin when TOC is enabled
-.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
-	.skin-vector-disable-max-width & {
-		margin-left: @margin-toc-start-content;
-	}
-}
-
 @media ( max-width: @max-width-margin-start-content ) {
 	// Adjusts the content and mw-article-toolbar-container.
 	.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
@@ -327,6 +334,7 @@ body {
 // HTML but only one is actually visible. Prevent the left margin from undesirably
 // applying if bucketed into the control or unsampled groups which won't show
 // the new TOC.
+.skin-vector-disable-max-width .vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
 body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-content-container,
 body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-article-toolbar-container,
 .vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
@@ -334,12 +342,9 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
 	@media ( min-width: @width-breakpoint-desktop ) {
 		margin-left: @margin-toc-start-content;
 	}
-}
 
-@media ( min-width: @width-breakpoint-desktop ) {
-	.mw-page-container {
-		padding-left: @padding-horizontal-page-container;
-		padding-right: @padding-horizontal-page-container;
+	@media ( min-width: @width-breakpoint-desktop-wide ) {
+		margin-left: @margin-toc-start-content-wide;
 	}
 }