fix: /expired-link, el botón descuadrado y el mensaje que no se veía

Dos cosas, y la segunda dejaba la página sin contenido:

- El botón "Solicitar nuevo cambio de correo" salía de 250x100 pegado a la
  derecha. `.back-to-account` es el botón de la CABECERA de una caja (250px de
  ancho, line-height 50, float right); suelto en el CUERPO el float lo pega a un
  lado, y el texto no cabe en 250px, se parte en dos líneas y cada una se lleva
  sus 50px. Se le deja el aspecto del tema pero ajustado a su texto: pasa a
  336x50 y centrado.
- El mensaje rojo ("el enlace ha expirado") NO SE VEÍA: el tema deja
  `.alert-message` con display:none porque es el hueco que rellena y revela el
  JS, y aquí el aviso es estático. Se pone display:block a mano, igual que hacen
  todos los formularios del proyecto. Comprobado que al original le pasa lo
  mismo: su página de enlace caducado enseña el título y el botón, y la
  explicación queda invisible.

Medido en el navegador: botón 336x50, centrado, sin desbordar, y el mensaje
visible.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-15 13:14:47 +00:00
parent c4f951561f
commit 57dd48e308
2 changed files with 18 additions and 1 deletions
+5 -1
View File
@@ -29,7 +29,11 @@ export default async function ExpiredLinkPage({ params }: { params: Promise<{ lo
<ServiceBox heading={t('expiredLink.pageTitle')}>
<div className="centered">
<br />
<div className="alert-message">
{/* `display:block` a mano, como el resto de formularios: el tema deja
`.alert-message` OCULTA para que la rellene y la revele el JS. Aquí
el aviso es estático y sin esto no se ve NINGUNO — le pasa al
original, que enseña esta página con el mensaje invisible. */}
<div className="alert-message" style={{ display: 'block' }}>
<span className="red-form-response">{t('expiredLink.message')}</span>
</div>
<br />