Hidable Sidebar Tab Group Headers

Feature requests
1

Use case or problem

Below is a screenshot of the sidebar showing the tabs area. As you can see, this tab group only contains one tab and on a smaller laptop screen, this can take up a sizable chunk of the sidebar real estate, especially if you want to have two or three things stacked on top of each other.

image
image364×178 8.97 KB

image
image402×1019 25 KB

Proposed solution

I think that these tabs should be resizable/hidable. Just like the window is resizable, you should be able to click and drag the bottom of that little tab up to hide it.
Once it is hidden, it could maybe be unhidden via an option in the right click menu to avoid ambiguity between resizing that and the larger tab group itself?

Current workaround

Right now, you can either live with a little bit of wasted space, or you could probably hide it with CSS, but as far as I am aware, hiding via CSS would hide all of these tab groups, which is not ideal. In the situation in the screenshot, the top group has multiple tabs that I switch between, while the lower two are stationary and are never moved or resized.

1 Like
2

I believe it may be possible for a snippet to hide only tab bars that contain a single tab (but I don’t know enough about Obsidian CSS to show how).

3

You can play with this CSS below. It hides all the container headers, everywhere. However, just hiding the headers doesn’t reclaim the screen space - you have to add a ‘height’ attribute to collapse it.

In my CSS below, you can remove either .nav–header, or .workspace–tab–header– container to see which one affects your desired headers.

I’m fairly certain that .workspace–tab–header–container should hide the one you have in your example.

.nav-header, .workspace-tab-header-container {
	visibility: hidden;
	height: 0px;
}
4

That snippet does work, and does hide the tab things, but is there a way to make it only hide specific ones? It seems to be hiding my actual notes’ tabs as well, which I would really prefer it not to if possible.

Thanks!

Snippet Disabled:

image
image1919×1021 43.7 KB

Snippet enabled:

image
image1919×1019 38.5 KB

5

I don’t think so, or t least I haven’t figured it out yet.

TBH, many of the headers use one of two CSS attributes (the two in my example), so I think it’s probably an all or nothing kind of thing.

6

We can be very specific targeting individual icons, but it also means it’s very rigid. If you change your workspace around often, it’s probably not ideal. An option to try though:

Obsidian_lbzhG3GQvX

.mod-right-split .workspace-tab-header-container:has(
    .svg-icon.lucide-git-fork, 
    .svg-icon.lucide-calendar-check) {
        display: none;
}
7

Thank! This is exactly what I was looking for. I still think it is worth considering as a native feature, but this is absolutely a workaround!