Nav wrapping in small window with long translations of "login"

More specifically, now that I am not on an iPad but in front of a real computer, these CSS rules already exist, so you can amend them or add to them in Admin, Customize, CSS/HTML:

.d-header button.login-button {
    margin-left: 7px;
    max-width: 75px;
    white-space: nowrap;
}

here we set a max width on login-button and indicate the text should not wrap to the next line.

.d-header #site-logo {
    max-width: 125px;
}

there is already a max-width specified for the mobile logo CSS, so you can make it smaller as needed with a CSS override.