/* Preserve the existing controls; allow only the display name to truncate. */
#headerAccountControls { min-width: 0; width: 100%; }
#headerAccountControls > button { flex-shrink: 0; }
#userInfo { min-width: 0; flex: 1; justify-content: flex-end; }
#userInfo > div { min-width: 0; }
#userAvatar { flex-shrink: 0; }
#userName { max-width: 120px; }
@media (max-width: 1023px) {
    body > .max-w-5xl > header { grid-template-columns: minmax(0, 1fr); }
    body > .max-w-5xl > header > div:last-child { min-width: 0; }
}
@media (max-width: 360px) {
    #headerAccountControls { gap: 6px; }
    #userInfo { gap: 6px; }
    #userName { max-width: 100%; }
    #userAvatar { width: 36px; height: 36px; }
}