I created that pull request so I guess I'm the one who should explain this (alhtough I already have in the github repo).
Usually, images take some time to load. Each of them will fire a different request (unless using the data attribute and base64 encoding it) so that takes additional time, usually after the page is fully loaded. So the image appears a bit later. As the image appears a bit later the login bar puts the Hello text where the image should be. Once the image is loaded it pushes everything to the right, creating an uncomfortable effect.
The solution I proposed was fixing the image maximum width to the actual maximum width in the CSS, which was 24px. For some reason, for non-square images this limit is not respected and, in your case, the 24px becomes a 36.
So we have to tackle 2 issues:
Keep a fixed image size of 24x24 pixels so that things don't move around during page load
Make sure the 24x24 limit is respected regardless of the actual image is size being uploaded
It seems the core actually sets those limits. So probably if we let the core handle the image size without making the theme change them I believe we should be fine.
This means remove the whole class:
min-width: 24px; /* pull request */
min-height: 24px; /* pull request */
I guess playing with the min-* might result in the image getting stretched too but that is up to you how you want it to behave. Please, report back so that I can correct the previous pull request.