VSCode Vertical Tab Bar

script.js

let innerWidthDesc = Object.getOwnPropertyDescriptor(window, 'innerWidth');
let getOriginalInnerWidth = innerWidthDesc.get.bind(window);
let setOriginalInnerWidth = innerWidthDesc.set.bind(window);

let VERTICAL_TABS_ENABLED = false;

Object.defineProperty(window, 'innerWidth', {
  get() {
    if (VERTICAL_TABS_ENABLED) {
      return getOriginalInnerWidth() - 200;
    }

    return getOriginalInnerWidth();
  },

  set(value) {
    setOriginalInnerWidth(value + 200);
  }
});

document.body.addEventListener('keydown', (e) => {
  if (e.code === 'Minus' && e.metaKey && !e.shiftKey && !e.ctrlKey && !e.altKey) {
    e.preventDefault();
    e.stopPropagation();

    VERTICAL_TABS_ENABLED = !VERTICAL_TABS_ENABLED;

    document.body.classList.toggle('vertical-tab-bar-enabled');

    let firstTabs = document.querySelector('.title.tabs')
    firstTabs.classList.toggle('vertical-tab-bar');

    document.querySelector('.monaco-workbench').style.backgroundColor = firstTabs.style.backgroundColor;

    window.dispatchEvent(new Event('resize'));
  }
}, { capture: true })

styles.css

.vertical-tab-bar-enabled .part.editor,
.vertical-tab-bar-enabled .part.panel.bottom {
  left: 200px;
  position: relative;
  overflow: visible;
}

.vertical-tab-bar-enabled .part.editor > .content,
.vertical-tab-bar-enabled .part.editor .title.tabs,
.vertical-tab-bar-enabled .monaco-grid-view {
  overflow: visible !important;
}

.vertical-tab-bar .tabs-and-actions-container .monaco-scrollable-element {
  position: absolute !important;
  left: -200px;
  height: calc(100vh - 22px) !important;
  width: 200px;
  z-index: 1000;
}

.vertical-tab-bar .tabs-container {
  flex-direction: column;
  height: 100% !important;
  width: 200px;
}

.vertical-tab-bar .tabs-container > .tab {
  min-width: 200px !important;
}