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!

Nell’issue non sono indicati file né test. Inizia individuando l’HTML/CSS delle schede dell’editor e riproduci la sovrapposizione con uno zoom maggiore o in un viewport ridotto. Il lavoro è completato quando le schede hanno uno spazio dedicato e non coprono mai le prime righe di codice.