vscode-tabs - support different layouts [enhancement]

[wfabr]

Proposed enhancement: Allow vscode-tabs to support different layouts. This could be supported with an API?

For example, the tabs could be stacked vertically in a column, and aligned to left or right of the panel.

---

As a workaround, I had to inject styles into the shadow DOM

    <VscodeTabs selectedIndex={activeTab} ref={(el: any) => {
        if (el?.shadowRoot && isWideLayout) {
          const style = document.createElement('style');
          style.textContent = '
              .header { align-items: start !important; }
              .tablist { flex-direction: column; width: 100%;}
          ';
          if (!el.shadowRoot.querySelector('style[data-vertical-tabs]')) {
            style.setAttribute('data-vertical-tabs', '');
            el.shadowRoot.appendChild(style);
          }
        }
      }}
    >

And apply css grid for Two-column layout for tabs

    .properties-panel vscode-tabs {
      display: grid;
      grid-template-columns: 120px 1fr;
      grid-template-rows: 1fr;
      gap: 16px;
      height: 100%;
      width: 100%;
    }

    .properties-panel vscode-tab-panel {
      grid-column: 2;
      grid-row: 1;
      height: 100%;
      padding: 0;
    }