Open
Description
What happened?
Hello, I am using the Pre-built Light Theme
with the spanish translation. The text message is truncated instead of being wrapped by the button.
Seems the issue is at
<div class="magic login-button">
<div>
<div class="icon">
<i class="fa fa-link"></i>
</div>
<div class="text">Inicio de sesión con un link mágico</div>
</div>
</div>
I tried modifying the login-button CSS class in browser but couldn't get it to render correctly. I suppose it is inheriting a class that's hiding the overflow and not wrapping it.
Version
1.54.0, 1.56.0
Saw on Firefox, Chrome, Safari on mac.
Affects Versions
Alternatives / Workarounds
Use advanced themes.
Modify the message to something shorter: Consigue un enlace mágico
, Enlace mágico
?
Replication Steps
- create a new simple theme, choose the light theme.
- Assign it to an application
- Enable magic link login on the application
- Enable it on the security tab of the application
- Make sure your tenant has a passwordless email template set up (content doesn't matter)
- Add in the spanish localization to the simple theme: https://raw.githubusercontent.com/FusionAuth/fusionauth-localization/refs/heads/develop/theme/messages_es.properties
- Open an incognito window
- Choose Spanish from the language drop down
Observe the overflow issue.