スクロール前のページタイトルは、単純な修正でした。そのタイトルは複数行に折り返されるため、オーバーフローは長い単語が幅を壊さないようにするためだけに存在していました。オーバーフローを削除し、overflow-wrap: break-word; を追加することで、スペースが足りない場合に単語を折り返すことができます。
タイトルがスクロール時にヘッダーにドッキングする際には、1 行を超えるタイトルを切り詰めるために overflow: hidden と text-overflow: ellipsis を併用しています。そこではオーバーフローを簡単に削除できないため、パディングを追加し、負のマージンで左に再配置しました。CSS としてはあまり綺麗ではありませんが、機能します。
https://github.com/discourse/discourse/commit/89f6ff1574d15c9d654472f9cd3536d6da833182
なぜこれが起こるのか、もう少し詳しく説明します。フォント内には「em ボックス」（em スクエアとも呼ばれる）という概念があります。これらのボックスは各文字で同じサイズであり、スケーリング、行の高さ調整、文字間隔の調整などの基準として機能します。
文字は em ボックスのどの方向にもはみ出すことがあります。これは特定の文字にとって必要な場合もあれば、単にフォントデザイナーがそうしたいと考えた場合もあります。ブラウザ側では、このオーバーフローしたコンテンツが存在することを検知する方法がないため、動的に対応することはできません。
私の知る限り、可能な選択肢は、可能であればテキストのオーバーフローを避けるか、避けられない場合は少し余分なパディングを追加することだけです。