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

Ozen · August 9, 2023, 3:32pm

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:

Feature Request (Prototype):

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;
}

zerkshop · August 9, 2023, 5:55pm

FWIW the tab wrapping looks like this for me

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;
}

CawlinTeffid · August 9, 2023, 10:16pm

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

ichmoimeyo · August 10, 2023, 2:28am

Perhaps …

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

PandaNocturne · September 17, 2024, 3:39pm

Thank you for sharing the CSS. I’ve borrowed and modified it a bit, using a flex layout. If the tabs are fixed, they will automatically move to the front. Additionally, the tab styles are inspired by the BT theme settings. Here is the modified style I made:

/* 2024-04-04_21:48: Reference: https://gist.github.com/digitalsignalperson/56fe3cbcf41707cb97362234cb07ccb0 */

.workspace .mod-root .workspace-tab-header-container.workspace-tab-header-container.workspace-tab-header-container {
  position: relative;
  height: fit-content;
  padding-right: 80px;
}

.workspace .mod-root .workspace-tab-header-container-inner {
  display: flex;
  justify-content: flex-start;
  align-content: space-around;
  flex-wrap: wrap;
  min-width: 100%;
}

/* !Spacing settings */
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
  min-width: fit-content;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-right: 4px;
  flex: 0 0 auto;
}

/* ======Tab style settings inspired by BT theme's safari-tab-style======== */
.workspace-tabs:not(.mod-stacked) .workspace-tab-header::before,
.workspace-tabs:not(.mod-stacked) .workspace-tab-header::after,
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner::after {
  display: none;
}

.workspace .mod-root .workspace-tab-header-inner::after {
  display: none;
}

.mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner,
.mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner {
  align-items: center;
  margin: 0;
  width: 100%;
}

.mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header,
.mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
  border-radius: 6px;
  box-shadow: none;
  height: calc(var(--header-height) * 0.7);
  padding: none;
}

.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
  transition: 400ms;
}

.workspace-tabs:not(.mod-stacked) .workspace-tab-header:first-child {
  margin-left: 0;
}

.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active:hover {
  background-color: var(--background-modifier-border);
}

.theme-light .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
  border: 1px solid var(--tab-outline-color);
}

.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
  border: 1px solid rgba(var(--mono-rgb-0), .25);
}

/* ==========Other button settings========== */
/* !Fixed new tab button */
.titlebar .workspace-tab-header-new-tab,
.mod-root .workspace-tab-header-new-tab,
/* !Dropdown menu adjustment */
.mod-root .workspace-tab-header-tab-list {
  position: relative;
  left: -20px;
  display: inline-block;
}
/* !Right sidebar button */
.workspace-tab-header-container>.sidebar-toggle-button.mod-right {
  position: relative;
  left: -20px;
  z-index: 1;
}

/* Always show close button */
.workspace.workspace.workspace .mod-root .workspace-tab-header:not(.mod-stacked) .workspace-tab-header-inner-close-button {
  display: flex;
}

/* Pinned tabs always at the front */
.workspace.workspace.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:has(.mod-pinned) {
  order: -1;
}


/* Do not show top buttons */
.titlebar-button-container.mod-right {
  display: none;
}

CawlinTeffid · September 29, 2024, 3:57am

An alternative workaround for the problem is to set a minimum tab size and scroll when the width of all the tabs exceed the available space.

/* Changes tab squish behavior from the chrome-like default (where they squish down really tiny) to firefox's (where they have a minimum size and then scroll).

Courtesy of @.bast. who wrote it for themself. https://discord.com/channels/686053708261228577/707816848615407697/1233953573851762769 */

.workspace .mod-root .workspace-tab-header {
    min-width: 100px;
}

pinny · February 3, 2025, 5:00pm

Hey, this code to make the tab width grow/shrink automatically has been working great for a really long time, but seems like a new update just came out and now it shrinks all of my tabs so that they are incredibly small (narrow). I tried width: fit-content; but that didn’t help. Any idea how to get the tabs to autoresize properly again?

(I am experiencing this across multiple vaults on multiple devices - Mac, PC, iOS. Running version 1.8.4)

Thanks!
Pinny

zerkshop · February 27, 2025, 10:11pm

I’m currently trying a new strategy, perhaps similar to vertical tabs plugins, but simply using bookmarks:

Use bookmarks as tabs. E.g. a structure like:
- Tabs
  - 2025-02-27
    - some canvas
    - group
      - tabs…
    - group
    - group
    - etc.
  - (future date) - possibly do this weekly or monthly? You’ll end up with a sort of snapshot history of what files you had open, and avoid baggage.
pin/unpin tabs as needed. This keeps them “open” even if you click on a tab in your bookmark tree. Useful cause we want to treat the bookmarks as tabs, where clicking a bookmark will open files in a new tab without navigating away from anything you are working on, and much faster without the extra steps of opening a new tab and changing focus
Keep only a few tabs open at once. Bookmark them under a context/category and close them. It’s just a click away to resume. This lets you keep some structure/order not possible with tabs (and annoyingly broken with the multi-row CSS) and avoid files open multiple times etc.

I also have been creating bookmark structures that are basically like “folders” but where notes can live under multiple categories. So those are still independent from this “tabs” section of my bookmarks. It’s just another redundant way to look up info by category instead of “what I’m working on right now”

Jopp · February 28, 2025, 10:00am

Stacked tabs are not just ugly yo look at but eat valuable vertical space, which is usually shorter than monitors are large.

As @zerkshop already mentioned, the community plugin “vertical tabs” or the core bookmark feature are much better solutions.

To improve tab management, tabs should act like folders, where you would add tabs to tab containers, and get a popout widget to make sub-tabs visible if you hover over the visible “container” tab.