title: Change VSCode style: Properly reduce the Height of tabs
body: <p>With the help of <a href="https://github.com/be5invis/vscode-custom-css" rel="nofollow noreferrer">this</a> extension, you can change the styling of vscode.</p>
  <p>I want to reduce the height of filetabs to 20px. I'm using something like this:</p>
  <pre><code>.editor-group-container{
      background-color: purple;
      max-height: 0px;
  }
  
  .editor-group-container-toolbar{
      background-color: lightblue;
      max-height: 20px;
      line-height: 20px;
      height: 20px;
      padding:0px;margin:0px;
  }
  .editor-container{
      background-color: lightgreen;
  }
  
  .title{
      background-color: lightblue;
      max-height: 20px;
      line-height: 20px;
      height: 20px;
  }    
  
  .primary-action-bar{
      background-color: orangered;
      max-height: 20px;
      line-height: 20px;
      height: 20px;
  }
  
  .monaco-action-bar .action-label{
      background-color: rgb(154, 165, 7);
      max-height: 20px;
      padding:0px;margin:0px;
      line-height: 20px;
      height: 20px;
  }  
  
  .title-label{
      line-height: 20px;
      height: 20px;
  }
  
  .tabs-and-actions-container{
      background-color: rgb(167, 108, 0);
      max-height: 20px;
      line-height: 20px;
      height: 20px;
  }
  
  .tab{
      background-color: rgb(166, 94, 168);
      max-height: 20px;
  }
  </code></pre>
  <p>It works fine for reducing the height of tabs. However, I now have a bar in the bottom, that I cannot remove:
  <a href="https://i.stack.imgur.com/4zcdk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4zcdk.png" alt="Illustration of new bar in the bottom of the editor" /></a></p>
  <p>edit: The Arrow is pointing at the white area. Not at the statusbar.</p>
  <p>So I'd like to know either:</p>
  <ul>
  <li>How do I remove the white bar?</li>
  <li>OR</li>
  <li>How do I set the tab-height properly?</li>
  </ul>