Given my low hopes of this being fixed, here's my custom CSS which condenses the top bar and moves the search box towards the left, making it expand seamlessly towards the right. If you don't like all these changes, pick and choose. I did this primarily because I can't stand the animation, and removing the animation would solve your problem too.
Screenshot (combined with Make the indicator of unread inbox messages more visible):

I use Stylish (Firefox, Chrome, Opera, IE?; quickstart, detailed explanations). I'm still experimenting, so this might still change. Firefox syntax:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("stackoverflow.com"), domain("meta.stackoverflow.com") {
/* Less space around the logo */
div.-main a.-logo {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Shorten “Documentation” to "Docum" */
a#nav-docs {
width: 4em !important;
overflow: hidden !important;
}
/* Move the search bar left of the navigation buttons */
div.-main nav.navigation {
order: 2;
}
div.-main form.searchbar {
order: 1;
}
/* Turn off the animation when (un)focusing the search box (and everywhere else) */
* {
transition: none !important;
/* animation-duration: 0s !important;*/
}
/* Shrink the left margin of the search bar */
form.searchbar {
padding-left: 4px !important;
}
form.searchbar input {
padding-left: 4px !important;
color: black !important; /*better contrast than the default grey*/
}
/* Hide the search icon? That affects the submit button as well. */
form.searchbar svg {
/*display: none !important;*/
}
/* Hide the useless, very wide reputation and badge display */
a.my-profile div.-rep {
display:none !important;
}
a.my-profile div.-badges {
display:none !important;
}
}
For Chrome, omit the first two lines and the trailing closing brace.
Thanks to Keen and Mad Scientist for the help with CSS.
Known issues:
- The search icon overlaps the placeholder text when the box is empty.
- This doesn't keep the bar expanded when the window loses focus.