Any way to add padding to top of editor?


I’m working on an atom UI theme and would like to add padding between my tabs and the top of the text editor. I’ve gotten pretty close with the following code but run into an issue where the last line of text in a file (as long as it overflows) is cut off based on the amount of padding I have set.

Here is the look I’m going for:

and the code I’m currently using:

.editor {
  @padding: 12px;

  .gutter-container {
    padding-left: @padding;
    overflow: visible;

    .gutter {
      padding-top: @padding;

  .scroll-view {
    padding-top: @padding;

  atom-overlay {
    margin-top: @padding;

What is really strange is that everything works great as long as my text overflows horizontally. However if my text fits in the frame horizontally the last line will get cutoff.


I’m also interesting in doing this. Can anyone help?