feat(#875): change image of combat to individual boxer and add view transition

[yurigo]

Descripción

Aprovechando las imágenes de vote-* he querido probar a hacer una transición de la lista de combates a la descripción del combate.

Cambios propuestos

• Se han añadido imágenes de los boxeadores a ambos lados en /combats/:id.
• Se ha modificado en la página de /combats cada imagen de los combates por boxeadores individuales.
• Se ha añadido una view transition en cada elemento.

Capturas de pantalla (si corresponde)

Antes

https://github.com/midudev/la-velada-web-oficial/assets/5684699/f67fc7c7-3ff5-4a01-b7e2-34e5d59b349c

Después

https://github.com/midudev/la-velada-web-oficial/assets/5684699/cab6c55c-a6bf-409f-b71e-2dcbb052eb89

Comprobación de cambios

• [x] He revisado que no haya ninguna PR (pull request) ya abierta con un problema similar, siguiendo el apartado de buenas prácticas
• [x] He revisado localmente los cambios para asegurarme de que no haya errores ni problemas.
• [x] He probado estos cambios en múltiples dispositivos y navegadores para asegurarme de que la landing page se vea y funcione correctamente.
• [x] He actualizado la documentación, si corresponde.

Impacto potencial

• Los combates 1vs1 y 2vs2 se han podido implementado siguiendo el enfoque visto en vote.astro
• ~en el 2vs2 las imágenes no quedan alienadas a la altura como estaban en la imagen anterior. ¿Se podría modificar el asset para no complicar la lógica?~
• El rey de la pista está implementado como caso particular y no hace nada especial

Contexto adicional

resolves #875

Enlaces útiles

• Documentación del proyecto:
• Código de referencia:

[vercel[bot]]

@yurigo is attempting to deploy a commit to the midudev pro Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions[bot]]

⚠️ Esta Pull Request tiene conflictos. Por favor, resuelvelos antes de que podamos evaluar los cambios.

[github-actions[bot]]

✅ ¡Los conflictos han sido resuletos! Un colaborador revisará pronto la Pull Request.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
la-velada-web-oficial	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 16, 2024 4:54pm

[yurigo]

• Se ha cambiado el estilo de los combates en /combates/index.astro. En lugar de utilizar widthen las imágenes de cada boxeador se ha cambiado por height y las 2vs2 se miran a los ojos (sin necesidad de cambiar el asset).
• Se ha cambiado en combates/[id].astro la forma en la que se estaba estilando. En pantallas estrechas las imagenes provocaban un desbordamiento.

[yurigo]

se han cambiado algunos estilos para mostrar los boxeadores correctamente en varios dispositivos:

• desktop chrome ✔
• desktop firefox ✔
• ios safari iphone 17.2.1 ✔
• ios safari/chrome ipad 15.6.1 ❌<-- no acepta overflow: clip y desborda la imagen y provoca un scroll horizontal.

La aplicación en el Layout tiene un overflow-x-hidden en el body pero safari no le hace ni caso. No obstante, si overflow-x-hidden se pasa al tag html safari lo renderiza correctamente.