Reduce padding/height of tab bar?

[macrospect]

Hi there. I’m looking for a css snippet (or a plug-in) that will allow me to reduce the vertical padding on each tab, and therefore the total height of the tab bar at the top of each Obsidian window. Somehow haven’t found here or on Reddit yet. Anyone know how to do this? Thank you!

[holroy]

The height of the tab bar at the top, seems to be dictated by the --header-height and some padding. To get to one of them try the following:

.workspace .mod-root .workspace-tab-header {
  padding-bottom: 0px;
  padding-top: 0px;
}

But it doesn’t seem to get you all the way, as that doesn’t change the --header-height away from the 40px, and it might also be you need to change stuff related to .workspace-tab-header-list (and potentially .workspace-tab-header-new-tab.

Sorry, that I couldn’t take you all the way, but maybe this is enough to get you going?

[ladyMonolid]

Style Settings plugin allows me to specify tab bar height for the theme I use (Minimal). I’m not sure whether it has similar options for other themes; I think it only shows options for the active themes / plugins.

[macrospect]

Yes, awesome, you did send me on my way. Thank you so much! In case it’s helpful to anyone else, here’s what I used to change what I believe is the header-height value to 35px (from 40px) and ensure the note title on each tab is centered. I just started messing around with css a few days ago, so there may well be something that doesn’t quite work with this on some level (not sure why I have .mod-root for one setting but not the other), but it seems to do the trick for now.

/* Modifies height of top bar */

.workspace-tab-header-container {
height: 35px;
}

.workspace .mod-root .workspace-tab-header {
padding-bottom: 0px;
padding-top: 0px;
}

[holroy]

@macrospect

(not sure why I have .mod-root for one setting but not the other), but it seems to do the trick for now.

When changing CSS multiple rules might come into play, and then there is calculated a specificity to determine which to use. The padding settings need those three selectors to kick into action, any less and it won’t take effect. This because there are another rule for this already.

You could (not tested, but I believe it’s so) add the .mod-root (and .workspace) to the height setting to increase its specificity, but you don’t seem to need to, and if it works it works.

[macrospect]

Thanks! Yes, I added the .mod-root and .workspace to the height specification and it worked, too.

I did realize, though, that my fix isn’t actually working for the far right left and right edges of the screen. The margin there is as it is in the original. Can’t seem to find the css element for those parts. If anyone knows, please let me know!

[macrospect]

Thanks! Yes, I did see that on Minimal. I just have another theme I like, which doesn’t have modifiable Style Settings, and am trying to avoid switching just over this.

[holroy]

.mod-root is the center panes. I thought you only wanted those changed.

Try changing .mod-root, to :is(.mod-root, .mod-left, .mod-right), and see if that is enough to also get the right and left part.

[macrospect]

Thank you. Yeah, that reaches the actual sidebars when expanded but, for some reason, not the spaces above the ribbons. I have been scouring the forums for the css element for those spaces, but can’t seem to locate it. I’ve tried .workspace-ribbon and .side-dock-ribbon, but no luck.

[holroy]

Hmm… I need to test this out, and not just play around, but it seems like the following could be helpful:

.mod-top .workspace-tab-header-container{
  height: 35px;
}

.mod-top .workspace-tab-header-container-inner {
  margin-top: 0px; /* You might want to have a little value here */
  padding-bottom: 0px;
}

This elements do at least have the various margin and padding set, which indicates you need to change them to lower the overall height.

[macrospect]

Interesting, I hadn’t tried that one. But I don’t think it has an effect, unless I’m doing something wrong.

[holroy]

OK, so now I’ve tested, and in my setup (using either default or Minimal theme), this CSS reduces the top bar down to 30px all across the line.

.is-left-sidedock-open .workspace-ribbon.side-dock-ribbon.mod-left::before,
.sidebar-toggle-button:is(.mod-right, .mod-left),
.mod-top .workspace-tab-header-container {
  height: 30px;
  /* background-color: blue !important; /* */
}

.workspace .mod-root .workspace-tab-header {
  padding-bottom: 0px;
  padding-top: 0px;
  /* background-color: green; /* */
}

.mod-top .workspace-tab-header-container-inner {
  margin-top: 0px;
  padding-bottom: 0px;
  /* background-color: yellow;  /* */
}

A few comments:

• These do not address every element on the top bar, but they do seem to address those which matters when deciding the height
• The syntax /* some: css-stuff; /* */ is a variant to allow to me have “line comments” in CSS. By adding/removing the first /* I can comment out/in that particular line. As it stands now, none of these are functional, but if you want to see which targets where, you can uncomment them (remove the /*) and see it in color. And of course, you can remove them altogether if you so please.
• I don’t think these changes should have too much side effect else where, but it’s always hard to tell until you experience it somewhere

[macrospect]

The color marking tip is really appreciated! I went ahead and color-marked the other, smaller parts as well (pink for the first element). But at least on my screen, the change seems to not be affecting the top left corner when the tab is collapsed, and it somehow changes the color of the top millimeter or two of the left ribbon when it’s open. Photos attached to see what I mean. I think I want the “collapsed” version of the first element, but just changing “open” to “collapsed” didn’t help. Thanks a lot for getting me so close! I’ll try to keep tinkering.

[macrospect]

Figured it out! Here’s a (probably redundant) snippet that does in fact work to reduce the header-height value from 40px to 35px (or maybe 34px). And thanks a million @holroy for getting me most of the way there.

/* Modifies height of top bar */

.workspace-ribbon.mod-left.is-collapsed {margin-top: 34px}

.workspace-ribbon.mod-left {margin-top: 34px}

.workspace-ribbon.side-dock-ribbon.mod-left::before {
height: 34px;
}

.sidebar-toggle-button:is(.mod-right, .mod-left){
height: 34px;
}

.mod-top .workspace-tab-header-container {
height: 35px;
}

.workspace .mod-root .workspace-tab-header {
padding-bottom: 0px;
padding-top: 5px;
}

.mod-top .workspace-tab-header-container-inner {
margin-top: 5px;
padding-bottom: 0px;
}