O título da página sem rolagem foi uma correção simples. Esse título pode quebrar em várias linhas, então o overflow estava lá apenas para evitar que palavras longas sem quebra desconfigurassem a largura. Remover o overflow e adicionar overflow-wrap: break-word; fará com que as palavras sejam quebradas quando não houver espaço suficiente.
Quando o título se fixa ao cabeçalho durante a rolagem, usamos overflow: hidden junto com text-overflow: ellipsis para truncar títulos maiores que uma linha… não podemos remover o overflow tão facilmente ali, então adicionei um pouco de padding e realinhei à esquerda com uma margem negativa. Não é o CSS mais bonito, mas funciona.
Um pouco mais de detalhes sobre por que isso acontece. Dentro de uma fonte, existe o conceito de uma caixa em (também chamada de quadrado em). Essas caixas têm o mesmo tamanho para cada caractere e servem como base para dimensionamento, ajuste de altura de linha, espaçamento entre letras, etc.
Os caracteres podem se estender para fora da caixa em em qualquer direção… às vezes é necessário para certos caracteres, outras vezes é apenas o que o designer da fonte quis fazer. No navegador, não há como detectar que esse conteúdo com overflow existe, então nada pode ser feito para levar isso em conta dinamicamente.
Pelo que sei, as únicas opções são evitar overflow em textos quando possível ou adicionar um pouco de padding extra quando não for possível.