HTML, CSS and JS Tabs (still) obscure first two lines

[arrowtype]

Describe the bug

Often – especially if I’m zoomed in a bit or using a small screen, like a Chromebook – the HTML/JS/CSS tabs cover up some of the code. This is especially a problem this year, because many students are tuning in from smaller screens (Chromebook, iPads, and all sorts of smart phones).

You can add some newlines to code to prevent this, but then those are removed by using the beautify feature, so this is probably a subtly discouraging piece of design for students.

Expected behavior

A good suggestion was made in a comment for a PR that was previously made to partially solve this problem:

#1002 (comment)

move the content down so it never bumps into the label box

Put another way, the tabs should span the full width of their area, and line 1 should start below that.

CodePen does it pretty well:

JSBin doesn’t box in the labels, but still gives them their own space:

Additional context

We could still make this work and use space efficiently. A few things that could help:

1. Smaller font size on these labels, perhaps using all caps and a bit of added letter-spacing
2. Less padding in the tabs
3. Dividing / resizing gray borders between code sections could be about half as thick

To illustrate what I mean, here is a quick mock-up of what I think might work:

Of course, I realize that the implementation may look different, and that’s totally fine. The main thing, though, is just that the tabs shouldn’t be able to cover up code.

I could maaaybe make a PR with new CSS, if that would be welcome. But, this may also be a pretty quick change for someone already familiar with the codebase. Let me know!

Thanks, as always, for a really helpful teaching tool!

[arrowtype]

UPDATE:

I think this problem is at least partly an issue caused by how Webkit (Safari) handles vh units, which these tabs use for sizing. These units increase in scale when Safari is zoomed, while they stay constant in Chrome/Firefox.

Still, the full-width tab style would be an improvement, as the current "corner" design ends up obscuring code content often, even in Chrome & Firefox (e.g. when a use scrolls to the middle of their code)j.