El tamaño del botón de respuesta está influenciado por la preferencia de tamaño del texto

Continuando la discusión de Nuevos controles de temas en Meta:

Creo que una parte de

hacer que todos los botones tengan el mismo tamaño de fuente

no funciona en todos los casos.

He elegido un tamaño de texto más pequeño en mis preferencias y eso parece influir en el tamaño del botón de respuesta. Es más pequeño que los otros botones. Curiosamente, no se hace más grande cuando elijo un tamaño de fuente mayor.

6 Me gusta

Tengo mi talla en normal y también veo este problema.

1 me gusta

Hola @Moin, gracias por informar. Nuestro diseñador está al tanto, pero aún no ha encontrado una solución. ¿Alguna idea de cómo podríamos resolverlo?

¿Está esto en la parte inferior de los temas en el móvil?
Quizás esté influenciado por el tamaño del texto de “Responder” en el escritorio/tableta, que no es visible en el móvil.

Creo que el botón de respuesta tiene el tamaño correcto y los botones de la izquierda no.

A diferencia de los otros botones en el área .topic-footer-main-buttons, el botón de notificaciones del tema está envuelto por un div (.topic-notifications-button).

Todos los botones del área, incluido el botón de respuesta (código simplificado):

<button></button>

Botón de notificaciones (código simplificado):

<div class="topic-notifications-button">
  <button></button>
</div>

El caso es que, debido a esta línea,

La propiedad font-size: var(--font-up-1) se aplica tanto al contenedor del botón de notificaciones como al botón interior.
Como saben, los valores em se multiplican incrementalmente de padre a hijo.

El resultado se puede ilustrar como:

<div class="topic-notifications-button" style="font-size: 1.15em;">
  <button style="font-size: 1.15em;"></button>
</div>

1.15 × 1.15 es el problema. El valor final de font-size en el elemento button de notificaciones es mayor de lo esperado.

No es obvio a primera vista porque los botones hermanos (llave inglesa, compartir, marcador, etc.) ajustan su altura al elemento más alto en la misma línea[1], por lo que el botón de notificaciones del tema no destaca como “demasiado alto”, ya que todos los botones de este contenedor tienen la misma altura.

Eliminar la línea resaltada en el onebox de GitHub anterior debería resolver el problema:


  1. Esto se puede ilustrar si agregamos algunos botones adicionales en el contenedor para que el contenido se ajuste:



    Los botones de la primera línea obtienen la altura esperada.

    Sin embargo, el botón de notificaciones, más grande de lo esperado debido a la multiplicación de em, hace que el botón adyacente en la misma línea aumente automáticamente de altura. ↩︎

7 Me gusta

Muchas gracias por depurar, se lo paso a nuestros diseñadores :hugs:

3 Me gusta

¡Sabía que era el botón de notificación lo que causaba el problema, pero aún no lo había localizado, así que, ¡maldita sea, qué buen hallazgo! ¡Había pasado por alto que se aplicaban dobles ems allí! Aún no lo he verificado, pero es muy probable que sea así.

¡Gracias! :clap:

6 Me gusta

Esto debería arreglarse (PR)

2 Me gusta

En temas fijados como Share your feedback about the 🆕 iOS Discourse Hub app el botón de respuesta sigue siendo más pequeño

2 Me gusta

El texto invisible \u200B junto al icono svg en el kit de selección :pushpin: aumenta la altura del botón. Cualquier texto en cualquier botón aumenta de manera similar su altura (y los botones hermanos ajustan su altura en consecuencia, como el comportamiento discutido anteriormente).

Sí, ese es un tema para el que abriré un tema interno. No estoy seguro de si &ZeroWidthSpace; está causando problemas debido a mis cambios, o si siempre fue así y acabamos de notarlo ahora en esta configuración.

1 me gusta

Este tema se cerró automáticamente después de 2 días. Ya no se permiten nuevas respuestas.