Aaaaaaaaah my eyes are bleeding! 
This is all really useful so thanks to everyone who has contributed in this thread.
I have had a play around but have an issue which I’m not sure how to resolve.
When I select a tab in the second row, the top row collapses (see screenshots below)
Does anyone have a fix for this?
hmm strange you see the left and right pane collapse those buttons at the top
are you using the same css from my last post?
I’m not sure what to suggest other than poke around with at it with the development tools (Ctrl+Shift+I), use the select element tool to pick one of the partially hidden things, and then see if you can un-hide it by messing with the css
another difference for me is I’m using Appearance > Window frame style = Native frame.
1 Like
Thank you for your resonse Zerkshop. Yes - I’m using your css from the last post.
You’ve cracked it! The above issue occurs when “Hidden (default)” is selected for the Window Frame Style; both other options seem to correct the issue.
Thanks again 
1 Like
Yes, I’ve had this issue ever since the release of 1.0. It has nothing to do with the “tabs in multiple rows” CSS.
Unfortunately, changing the “Window Frame Style” doesn’t fix things. All modes suffer from the issue of the entire page shifting up.
I love this, but it makes the the little arrow that accesses the menu to bookmark or stack tabs go away. Is there way to bring that back?
I think it might be this part. You can try deleting this or other chunks that have display: none
Yep, that’s it. Problem is that the fix breaks the feature:
It creates an extra row for the collapse indicator to sit by itself.
I’ve had a play around and have added some css code to the above. I wanted to increase the width of tabs with more text in so I would be able to see longer titles. To do this, I updated “.workspace .mod-root .workspace-tab-header” to:
.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);
}
I also found a way to wrap the tabs around to multiple lines if the maximum length set was exceeded:
/* 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;
}
I am a css beginner so a lot of this was found through trial and error (+ChatGPT) so I probably won’t be able answer any questions on the above, but I hope someone finds it useful
*Edit: Added in code-blocks back-ticks for readability.
1 Like
Have you checked your theme?
I’ve just tried that fix on Minimal and it works fine now.
The latest update in 1.3.7 “Tab close button is now hidden for inactive tabs and will only appear on hover. This creates more space for file names inside the tab.”
This was not a good experience for me, since it shifts the sizes of the tabs as you move your cursor along them, sometimes pushing a tab into the next row momentarily, etc.
Here’s a quick fix to keep the tab close button always:
.workspace .mod-root .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button {
display: flex;
}
or otherwise can just get rid of the tab close button in all cases, and use middle click mouse to close tabs (but careful on linux, though this should be solved)
.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;
}
It’s so disappointing to me that the devs don’t adequately test their design changes. This is such an obvious problem
To be fair, I don’t think it’s an issue until you mess with the css snippets in this thread. The original tabs are kind of fixed-width without these css snippets, and I’m not seeing the same jankyness in another vault without the snippets.
Anyоne found a way to swap arrangements of tabs in lower tabs rows?
neither of these work anymore. I’m not sure why. Anyone have a solution?
kk, fixed it. Just realized the rule changed so copied it like this:
/* hide inactive close button */
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button {
display: none;
}
/* hide active close button */
.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
}
/* another rule to override the app trying to make it flex */
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:hover .workspace-tab-header-inner-close-button {
display: none;
}
also 3rd rule there for the app seems to override display to flex with that sometimes
Also broken: cannot seem to rearrange tabs at all. Not sure which part of the css breaks it.
1 Like
Thank you, this works as of v1.5.3.
This is so useful!
Could you make it a plugin, or at least publish in a github gist the whole css?
Just found this thread. Very nice! Thank you!