Editor labels can overlap long lines of code

[outoftime]

Submitter: Courtney LeGates
Email: courtney@scripted.org
Can you please make the HTML/CSS/JavaScript boxes smaller so that there is less of a chance of overlap with the first line of code?

[iamnickvolpe]

I personally feel there's no better way of doing it than to move the content down so it never bumps into the label box. Yes, you take a hit on vertical space efficiency, but you gain ultimate clarity. This could be mitigated by making them a little smaller. In which case, they would probably look better over on the left.

What I like to do is check out how other products in the space handle a similar pattern. Here's what I found:

Codepen

Bars take up their own space. Code never runs into them.

JSFiddle

Code labels are slightly translucent.

JSBin

Bars take up their own space. Code never runs into them.

Visual Studio Code

Code label is on its own tab. Takes up its own space.