diff --git a/resources/skins.vector.styles/Sidebar.less b/resources/skins.vector.styles/Sidebar.less
index 14ae714d9..594b92796 100644
--- a/resources/skins.vector.styles/Sidebar.less
+++ b/resources/skins.vector.styles/Sidebar.less
@@ -4,8 +4,6 @@
 @import 'legacy/Sidebar.less';
 @import 'checkboxHack.less';
 
-@margin-horizontal-sidebar-button-icon: 12px;
-
 .mw-sidebar-action {
 	// Align with the portal heading/links
 	// `.portal` + `.portal .body`
@@ -25,8 +23,6 @@
 	height: @size-sidebar-button;
 	border: 1px solid transparent;
 	border-radius: @border-radius-base;
-	margin-left: -@margin-horizontal-sidebar-button-icon;
-	margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
 
 	&:before {
 		// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
diff --git a/resources/skins.vector.styles/layout-default.less b/resources/skins.vector.styles/layout-default.less
index 9e08711e8..f253237c5 100644
--- a/resources/skins.vector.styles/layout-default.less
+++ b/resources/skins.vector.styles/layout-default.less
@@ -2,6 +2,8 @@
 // Default layout for Modern Vector.
 //
 
+@margin-horizontal-sidebar-button-icon: 12px;
+
 body {
 	// General background/foreground color definition as one exception to the rule.
 	background-color: @background-color-base;
@@ -140,6 +142,11 @@ body:not( .skin-vector-search-header ) #p-personal,
 	}
 }
 
+#mw-sidebar-button {
+	margin-left: -@margin-horizontal-sidebar-button-icon;
+	margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
+}
+
 #mw-panel {
 	position: absolute;
 	// The sidebar is absolutely positioned inside the header which applies a top
diff --git a/resources/skins.vector.styles/layout-search-header.less b/resources/skins.vector.styles/layout-search-header.less
index d28196053..1fdf703ac 100644
--- a/resources/skins.vector.styles/layout-search-header.less
+++ b/resources/skins.vector.styles/layout-search-header.less
@@ -3,19 +3,24 @@
 
 @min-width-search: unit( 350px / @font-size-browser, em );
 @max-width-search: unit( 580px / @font-size-browser, em );
+@margin-horizontal-search: unit( 40px / @font-size-browser, em );
 
 // The logo is variable width but typically consists of:
 // - a icon (50x50)
 // - a wordmark (approx 120px)
-@min-width-logo: unit( 170px / @font-size-browser, em );
+@min-width-logo: unit( 180px / @font-size-browser, em );
 
-@min-width-personal-tools: @max-width-search;
+@min-width-personal-tools: unit( 300px / @font-size-browser, em );
 
 @padding-horizontal-page-container: 30px;
 @padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
+@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
 
-@min-width-supported: @width-grid-column-one + @min-width-personal-tools +  ( @padding-horizontal-page-container-ems * 2 );
-@width-comfortable: @min-width-logo + @size-sidebar-button + @max-width-search + @min-width-personal-tools;
+// the width of the container if you exclude consideration for search
+@min-width-container-base: @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @min-width-personal-tools;
+
+@min-width-supported: @min-width-container-base + @min-width-search;
+@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search;
 
 @height-personal-tools: 2em;
 
@@ -26,7 +31,7 @@
 		// Override values to reflect new behaviour.
 		min-width: @min-width-search;
 		max-width: @max-width-search;
-		margin: 0 40px;
+		margin: 0 @margin-horizontal-search;
 	}
 
 	// Support IE9: float will be disabled if display flex is supported
@@ -51,6 +56,10 @@
 			top: @height-header-adjusted - @margin-top-header;
 		}
 
+		#p-personal {
+			width: @min-width-personal-tools;
+		}
+
 		.mw-header-placeholder {
 			height: @height-header-adjusted + @height-tabs;
 		}