Obsidian (macOS): remove the gap next to the traffic lights when the ribbon is hidden
A one-line CSS snippet for people who hide Obsidian's left ribbon on macOS.
| Before | After |
|---|---|
 |
 |
With Settings → Appearance → Show ribbon turned off, the sidebar tabs in the top-left corner (Calendar here) sit well to the right of the red, yellow and green window buttons. The empty space is wasted and looks like a bug.
Obsidian reserves room for the traffic lights with a CSS variable. From Obsidian's built-in CSS:
.mod-macos {
--frame-left-space: calc(80px - var(--ribbon-width));
}
.mod-macos.is-popout-window {
--frame-left-space: 80px;
}
body:not(.show-ribbon) {
--ribbon-width: 0px;
}
.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-left-space .workspace-tab-header-container {
padding-left: calc(var(--size-4-2) + var(--frame-left-space));
}The traffic lights need about 80px. When the ribbon is showing, its 44px column already covers part of that, so the tab bar only adds 80 − 44 = 36px.
With the ribbon hidden, --ribbon-width is 0, so the tab bar gets the full 8px + 80px of left padding. The lights end at about 60px, so 20–30px of that is empty. Some themes add more on top: Underwater, for example, puts padding: 1px 15px on .workspace-tab-header-container-inner.
Pop-out windows have the same gap. They never have a ribbon, but Obsidian hard-codes the full 80px for them regardless.
Shrink the reserved space on macOS whenever there's no ribbon: in the main window when the ribbon is hidden, and always in pop-out windows:
body.mod-macos:not(.show-ribbon),
body.mod-macos.is-popout-window {
--frame-left-space: 44px;
}Because it only overrides the variable Obsidian already uses, turning the ribbon back on restores the normal spacing. Nothing else in the layout is touched.
- Save
no-ribbon-offset.css(below) into your vault's snippets folder:<vault>/.obsidian/snippets/. Create the folder if it doesn't exist. - In Obsidian, open Settings → Appearance → CSS snippets, click the refresh icon, and turn on no-ribbon-offset.
Or from a terminal:
curl -L https://gist.githubusercontent.com/goobta/6fd0817e7b34aa80a235e21beb494f90/raw/no-ribbon-offset.css -o "<vault>/.obsidian/snippets/no-ribbon-offset.css"44px was tuned on the Underwater theme, which adds 15px of its own padding. On the default theme or others, the icon may land a little closer or farther from the lights. Change the number to taste: bigger moves the tabs right, smaller moves them left. Keep it big enough that the tabs don't overlap the green button.
