Found it — the bug is a timing issue with hidden elements, and it explains why local "looks perfect" while live doesn't (timing is non-deterministic, so it's really just luck either way).
Root cause
javascript
This runs initGoogleAuthButton() the moment the Google script finishes loading — which is almost immediately on page load, before the user has even opened the login modal. But your modal starts hidden:
css
.modal-overlay {
display: none;
...
}
An element with display: none (or a hidden ancestor) always reports offsetWidth = 0. So:
javascript
width: container.offsetWidth, // reads 0 when the modal hasn't been opened yet
Google then falls back to its own default minimum button width instead of matching your container — which is exactly the shrunk-looking button you're seeing. On local it likely "worked" purely by coincidence of load timing, network speed, or you happening to open the modal slowly enough for something to re-trigger — not because the code was actually correct.
Fix — render the Google button only when the modal is actually opened, not on page load
Since showLoginModal() lives in auth_system.js (which you haven't shared), the safest fix that doesn't require touching that file is to watch for the modal's active class being added, and render the button at that moment — when its real width is available.
Replace your current Google script block with this:
html