Page title bar overflows and has odd sizing behavior on small and/or zoomed screens

リンク先の classroom assignment を開き、小さい viewport とズームした viewport で、特に Safari における title-bar のオーバーフローを再現し、その後 Chrome と Firefox を比較します。title-bar のマークアップとスタイルを調査し、そのサイズとコントロールがどのように動作するかを確認します。長いタイトルがバー内に収まり、コントロールが表示されたままで、バーが出力コンテンツを覆わなければ完了です。

Describe the bug

Take a look at a classroom assignment that has a longish title, on a small or zoomed-in view. The title bar stays a small size (height: 2.4vh;), while the text gets relatively larger, overflowing the header boundaries, and overlapping page content. This is especially a problem if I am zoomed in, as I usually do when presenting code to students over Zoom, because they tend to have smaller screens (often just smartphones).

This acts a little differently between Chrome and Safari. On Chrome, the vh-based sizing keeps these elements small, even when the page is zoomed-in. In Safari, these elements increase in size as the page is zoomed. But, even when a non-Safari browser is used at a normal-ish size (say, 1000px wide), problems can easily arise from medium-length titles. Here’s Firefox at 1000px wide:

To Reproduce

Enter in a medium-long page title while using popcode in a medium-small viewport – especially while using Safari.

Expected behavior

This title bar would probably make more sense if it acted more like a "tab" in a browser UI.

• Long titles would be truncated with ellipses (here’s how to do so with just CSS).
• It may be easier to do this if the refresh & collapse buttons are moved before the text, but it would probably be better to rearrange the HTML structure a bit, so that the overflow can be hidden and text can truncated, without pushing these UI buttons out of view
• Text shouldn’t overflow past the edge of the title bar, and the title bar shouldn’t cover up any content in the output web page.

Here are tabs in Chrome and Safari browsers, to illustrate what I mean:

Environment

• Mac Catalina
• Safari 13.1.1