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

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:

https://github.com/popcodeorg/popcode/issues/1002#issuecomment-344085126

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!

No file or test is named in the issue. Start by locating the HTML/CSS for the editor tabs and reproduce the overlap at increased zoom or on a small viewport. Done means the tabs have their own space and never cover the first lines of code.