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.