Login Username Label change?

1

Just using the standard Accounts in a package like so…

 api.use(['accounts-ui', 'accounts-password']);

I noticed the Label for “Username or Email” pushes a hard coded field size of 250px off the edge of the screen (when properly positioned to the right).
I thought to just change the too long label to "Account: " so it doesn’t push the field off the screen or not even lineup properly (hence the no break space hack).

I’ve managed something like this.

let usrLabel = jQuery.find('#login-username-or-email-label')[0];
usrLabel.innerHTML = "Account: ";

in the console but I am unclear where the best hook for this is or what it would be in Accounts.ui.config or what people do here to fix this?

I noticed some alternative screen shots where the label is just grey text inside the field (that would be prefered, is there a newer version number needed or something?).
Is this so inaccessible aka undocumented that I should just build a custom solution, or is there a simple way to make it look slightly less “jr”.

Thanks for your help. It’s just a bit Frustrating, to see step one is falling short of my expectations.

2

Well I’ve just found this works nicely in my situation after some deeper digging into the structure of the accounts-ui-unstyled.js

Template._loginButtonsLoggedOutPasswordService.onRendered(function () {
    let usrLabel = jQuery.find('#login-username-or-email-label')[0];
    if(usrLabel.innerHTML) usrLabel.innerHTML = "Account: ";});

There’s got to be a better way, right?