Make Tabs expand into multiple rows when there are too many visible in tab header

Feature requests
1

Use case or problem

When too many tabs are visible in the tab header, their titles will be barely readable because they are squished so tightly together.
This is manageable when only one file is opened, but gets really annoying when two or more files are open at the same time in the vertical window allignment.

Proposed solution

Letting tabs expand into multiple rows would fix this issue, because it opens up more space for the titles of the tabs.

What it looks like currently:

grafik
grafik1852×271 25.2 KB

Feature Request (Prototype):

grafik
grafik1850×320 29.6 KB

This UI change is from:

Current workaround (optional)

CSS copied from comments in link above

.workspace .mod-root .workspace-tab-header-container {
  display: table;
  height: unset;
}

.workspace .mod-root .workspace-tab-header-container-inner {
  flex-wrap: wrap;
  margin: unset;
  padding: unset;
}

.workspace .mod-root .workspace-tab-header {
  flex: none !important;
}

.titlebar .workspace-tab-header-new-tab,
.mod-root .workspace-tab-header-new-tab {
  display: table-cell;
  padding: unset;
}

.workspace .mod-root .workspace-tab-header {
    flex: none !important;
    width: unset;
 /* max-width: fit-content;	*/  /* this can be used so that the max width will wrap to fit in the content	 */ 
    min-width: 20px; /* set the minimum width here */
    max-width: 300px; /* set the maximum width here */
    border: 1px solid var(--color-base-50);
}

.workspace .mod-root .workspace-tab-header-inner::after {
    width: 0px;
}

/* Override the "white-space: nowrap" property for all instances of .workspace-tab-header-inner-title */
div.workspace-tab-header .workspace-tab-header-inner-title,
div.pinned-items-container .workspace-tab-header-inner-title,
div.vault-tabs-container .workspace-tab-header-inner-title {
  white-space: initial !important;
}

body {
    --tab-outline-color: unset;
}

.workspace .mod-root .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button {
    display: flex;
}

.workspace .mod-root .workspace-tab-header.is-active:hover .workspace-tab-header-inner-close-button, .workspace .mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button {
    display: none;
}
3 Likes
2

FWIW the tab wrapping looks like this for me

image
image964×287 21.6 KB

where each pane is independent, vs screenshot above has 3 rows in the pane with 1 tab.

  • css for making the tabs stretch or shrink by the length of the title:
.workspace .mod-root .workspace-tab-header {
    width: unset;
    max-width: var(--tab-width);
    border: 1px solid var(--color-base-50);
}

.workspace .mod-root .workspace-tab-header-inner::after {
    width: 0px;
}

body {
    --tab-outline-color: unset;
}
  • css for multiple rows
.workspace .mod-root .workspace-tab-header-container {
  display: table;
  height: unset;
}

.workspace .mod-root .workspace-tab-header-container-inner {
  flex-wrap: wrap;
  margin: unset;
  padding: unset;
}

.workspace .mod-root .workspace-tab-header {
    flex: none !important;
}

.titlebar .workspace-tab-header-new-tab,
.mod-root .workspace-tab-header-new-tab {
    display: table-cell;
    padding: unset;
}

.titlebar .workspace-tab-header-tab-list,
.mod-root .workspace-tab-header-tab-list
{
    display: none;
}

.workspace .mod-root .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button {
    display: flex;
}
1 Like
3

I think there’s also a plugin that enables this.

4

Perhaps …

https://i.imgur.com/iZJ5byx.mp4