VSCode: Altering pinned tabs - either make the font smaller or increase tab width

Question

I am working with Custom CSS Loader and it's all setup.

I can alter CSS for VSCode and make changes. But the only thing I cannot change for some reason is the text within the tab.

I can alter the icon size when I just font-size for tab. But it has no effect on the text size.

And I have try increasing the width of the tab but there is no go.

I can only guess what .tab-container and .tab does.

Here is what I want to alter:

Here's the CSS code I stole from someone's suggestion within VSCode's Issues:

:root {
    --size-reduction: 12px;
}

.monaco-shell {
  font-family: "JetBrains Mono", "Monoco", monospace;
}

.tabs-container .tab,
.tabs-container .monaco-icon-label,
.tabs-container .monaco-icon-label::before,
.tabs-and-actions-container .editor-actions {
    height: unset !important;
}

.monaco-workbench .tabs-container .tab * {
  font-size: 0.5em;
  width: 100px;
}

.editor-instance > .monaco-editor,
.editor-instance > .monaco-editor .overflow-guard,
.editor-instance > .monaco-editor .monaco-scrollable-element {
    height: 100% !important;
}

.editor-instance,
.editor-instance > .settings-editor .settings-toc-wrapper,
.editor-instance > .settings-editor .settings-editor-tree {
    height: calc(100% + var(--size-reduction)) !important;
}

.editor-instance > .settings-editor {
    height: calc(100% - var(--size-reduction)) !important;
}

Can someone please break down the each of the elements (.tab, .tab-container, etc.) or point me to a source that breaks it all down?

Also, if I adjust the font-size within tab, why isn't the tab's fonts shrinking?

My Pinned Tab Sizing is set to "Shrink". I have tried changing it from Compact and Norman with no difference in Font Sizing.

My normal font is "Jetbrains Mono" for the editor.

Answer 1

Acknowledging that this answer does not answer my original inquiry of "altering shrink pinned tabs either with width or font size."

But without using CSS-Custom-Loader and fiddling with the viscose's css, I found a more elegant solution using the UI settings.

The three settings to pay attention to:

• Pinned Tab Sizing: Normal
• Workbench > Editor: Show Tabs checked
• Workbench > Editor: Tab Sizing shrink

Now I will pin 8 to 10 tabs at a time. So this will fit nice and neat within a workspace.

If I had 30 pinned tabs, I don't know if it would show enough to make a difference.

Answer 2

Preferences - settings search 'tab sizing'

you can choose normal,compact or shrink