Problema de diseño responsivo de búsqueda "en este tema" con fuente base "Ubuntu"

Hola, tengo un problema de renderizado extraño en ciertos niveles de zoom con Firefox en mi sitio. El problema es que el texto de búsqueda “en este tema” se divide en dos líneas. Parece que solo ocurre con la fuente base del sistema configurada como “Ubuntu” y el nivel de zoom al 100% o 110%. También tengo la preferencia de tamaño de fuente de la interfaz de mi perfil de Discourse configurada como “Más grande”. Estoy viendo el mismo comportamiento con el tema simple de Sam y con el tema claro predeterminado de Discourse, y probé a deshabilitar todos mis componentes de tema, por lo que no parece estar relacionado con ninguna otra personalización aparte del estilo de fuente base.

Discourse Meta con el tema simple de Sam y la fuente Arial predeterminada, sin error (también igual en mi sitio con la fuente base Arial)

Mi foro con el tema simple de Sam y la fuente base “Ubuntu”

Zoom al 100%, error presente:

Zoom al 110%, error presente:

Zoom al 120%, sin error:

Zoom al 90%, sin error:

1 me gusta

Re-categorizado como UX porque todavía funciona, pero el diseño está mal. ¡Gracias por informarlo! Debería ser una solución sencilla, necesitaremos evitar que ese texto se ajuste con un poco de CSS.

3 Me gusta

¡Muchas gracias, Kris! No estaba seguro de si sería “UX” si no está relacionado con agregar/eliminar/mover elementos de UX. Me interesará ver la solución CSS, porque me he encontrado con problemas de ajuste de texto en varios lugares con mis propias personalizaciones de temas, pero eso es culpa mía. :wink:

1 me gusta

Esto debería solucionarlo:

Es solo

white-space: nowrap aplicado al CSS del botón.

4 Me gusta

¡Muchas gracias Kris! Con esa corrección añadida a un componente de tema personalizado, ahora es mucho mejor. Ahora hay una nueva peculiaridad donde las barras de desplazamiento aparecen solo al 100% de Zoom y permiten unos 5px de movimiento horizontal:

1 me gusta