diff --git a/resources/common/variables.less b/resources/common/variables.less
index af6eac02..bdd0bbd1 100644
--- a/resources/common/variables.less
+++ b/resources/common/variables.less
@@ -133,8 +133,6 @@
 @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
 @max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less
index 069cf198..8b67ecef 100644
--- a/resources/skins.vector.styles/components/Sidebar.less
+++ b/resources/skins.vector.styles/components/Sidebar.less
@@ -30,11 +30,13 @@
 .sidebar-toc,
 .sidebar-toc:after {
 	// Match styles between TOC and fade element to ensure the fade covers the correct area
-	width: @width-sidebar;
+	// This is expressed in pixels to support different font sizes since our layout is currently
+	// expressed in pixels. See T313817.
+	width: @width-sidebar-px;
 	margin-left: 0;
 
 	@media ( min-width: @min-width-desktop-wide ) {
-		width: @width-sidebar-wide;
+		width: @width-sidebar-px-wide;
 		margin-left: @margin-start-sidebar-content;
 	}
 }