diff --git a/resources/skins.vector.styles/VueEnhancedSearchBox.less b/resources/skins.vector.styles/VueEnhancedSearchBox.less
index 41cadef..83616b1 100644
--- a/resources/skins.vector.styles/VueEnhancedSearchBox.less
+++ b/resources/skins.vector.styles/VueEnhancedSearchBox.less
@@ -82,16 +82,19 @@
 	#mw-searchButton {
 		// Override the default right & left position of the icon.
 		right: auto;
-		left: 0;
+		// Accounts for the 1px input border. Derived from
+		// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/input/Input.vue#163
+		left: 1px;
 		// Increase size to match WVUI.
 		width: @size-search-figure;
 	}
 
 	// Reposition search icon for expanded input.
-	#searchInput:focus ~ #searchButton {
+	#searchInput:focus ~ #searchButton,
+	#searchInput:focus ~ #mw-searchButton {
 		// Derived from
-		// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/components/typeahead-search/TypeaheadSearch.vue#610
-		left: -12px;
+		// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
+		left: -11px;
 	}
 
 	// Reset WVUI. Prevents the input border from animating
diff --git a/resources/skins.vector.styles/layout-default.less b/resources/skins.vector.styles/layout-default.less
index 8b828a8..bc3d08b 100644
--- a/resources/skins.vector.styles/layout-default.less
+++ b/resources/skins.vector.styles/layout-default.less
@@ -55,7 +55,15 @@ body {
 	max-width: 100%;
 	flex-grow: 1;
 
-	#searchform {
+	// #searchform is only a direct child of #p-search before wvui-loads. After
+	// wvui loads, `.wvui-typeahead-search` becomes the direct child and is the
+	// element where these styles should apply.
+	> #searchform,
+	.wvui-typeahead-search {
+		// Border-box sizing is used for a smooth transition from legacy to Vue
+		// search. The width of the container should stay the same before/after the
+		// transition.
+		.box-sizing( border-box );
 		margin-left: 0;
 		max-width: @max-width-search;
 	}
@@ -266,7 +274,11 @@ body {
 // We use @width-comfortable to determine this threshold as we know it's not possible for
 // personal tools to be on the same line at this resolution.
 @media ( max-width: @width-comfortable ) {
-	#p-search #searchform {
+	// #searchform is only a direct child of #p-search before wvui-loads. After
+	// wvui loads, `.wvui-typeahead-search` becomes the direct child and is the
+	// element where these styles should apply.
+	#p-search > #searchform,
+	#p-search .wvui-typeahead-search {
 		margin-left: auto;
 	}
 }