El título de la página sin hacer scroll fue una solución sencilla. Ese título puede envolver en varias líneas, por lo que el overflow solo estaba allí para evitar que palabras largas sin espacios rompan el ancho. Eliminar el overflow y agregar overflow-wrap: break-word; hará que las palabras se rompan cuando no haya suficiente espacio.
Cuando el título se fija al encabezado al hacer scroll, usamos overflow: hidden junto con text-overflow: ellipsis para truncar títulos que son más largos que una línea… no podemos eliminar el overflow tan fácilmente allí, así que agregué algo de relleno y re-alineé a la izquierda con un margen negativo. No es el CSS más bonito, pero funciona.
https://github.com/discourse/discourse/commit/89f6ff1574d15c9d654472f9cd3536d6da833182
Un poco más de detalle sobre por qué ocurre esto. Dentro de una fuente existe el concepto de caja em (también llamada cuadrícula em). Estas cajas tienen el mismo tamaño para cada carácter y sirven como base para escalar, ajustar la altura de línea, el espaciado entre letras, etc.
Los caracteres pueden extenderse fuera de la caja em en cualquier dirección… a veces es necesario para ciertos caracteres, a veces es simplemente lo que el diseñador de la fuente quiso hacer. En el navegador no hay forma de saber que existe este contenido desbordado, por lo que no se puede hacer nada para tenerlo en cuenta dinámicamente.
Por lo que sé, las únicas opciones son evitar el desbordamiento en el texto cuando sea posible o agregar un poco de relleno adicional cuando no se pueda.