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

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

Abre la classroom assignment enlazada y reproduce el desbordamiento de la title-bar en viewports pequeños y ampliados, especialmente en Safari; después, compara Chrome y Firefox. Inspecciona el marcado y los estilos de la title-bar para determinar cómo se comportan su tamaño y sus controles. Se considera completado cuando los títulos largos permanecen dentro de la barra, los controles siguen visibles y la barra no cubre el contenido de salida.