edited original post to add .workspace .mod-root to the first two rules. It fixes some issues with tabs in new windows, and makes the selector more specific to not change other “tabs” in the application
It seems like it would be nice to be able to re-arrange the tabs properly (it’s a bit finicky, I think you can either drag a tab anywhere in the first row, sometimes to the end of the Nth row, and always to the end of the last row), but I haven’t found myself needing it. And the constraint creates a bit of a workflow:
click “+” to focus the desired pane and open a new tab at the end, then open or create a new note, etc.
older tabs = top left, newer tabs = bottom right
kill off old tabs as you go from from the top to the bottom
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.
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.
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.
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:
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)
