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!

issue にはファイル名もテストも記載されていません。まずエディタータブの HTML/CSS を見つけ、ズーム倍率を上げた場合または小さな viewport で重なりを再現してください。タブが専用のスペースを持ち、コードの最初の行を決して覆わなければ完了です。