obsidian.css.masonry.tabs.css

body {
    /* Fit 2 per screen = 930px ... 3 = 620px */
    --masonry-split-widths: 930px;
    --tab-stacked-pane-width: var(--masonry-split-widths);
}

div.workspace-split.mod-root {
    overflow: auto;
}

/* Need this for any panes scrolled off screen to be able to drag tabs properly */
div.workspace-split.mod-root>div.workspace-split.mod-vertical {
    width: unset;
}

div.workspace-split.mod-root>div.workspace-tabs,
div.workspace-split.mod-root>div.workspace-split.mod-vertical>div.workspace-tabs,
div.workspace-split.mod-root>div.workspace-split.mod-vertical>div.workspace-split.mod-vertical,
div.workspace-split.mod-root>div.workspace-split.mod-vertical>div.workspace-split.mod-horizontal,
div.workspace-split.mod-root>div.workspace-split.mod-horizontal,
div.workspace-split.mod-root>div.workspace-split.mod-horizontal>div.workspace-split.mod-vertical,
div.workspace-split.mod-root>div:only-of-type.workspace-split.mod-horizontal>div.workspace-split.mod-vertical>div.workspace-tabs,
div.workspace-split.mod-root>div.workspace-split.mod-horizontal>div.workspace-split.mod-vertical>div.workspace-split.mod-horizontal {
    min-width: var(--masonry-split-widths);
}

div.workspace.is-right-sidedock-open div.sidebar-toggle-button.mod-right,
div.workspace:not(.is-right-sidedock-open) div.sidebar-toggle-button.mod-right {
    position: fixed;
    right: var(--frame-right-space);
    background-color: var(--background-secondary-alt);
    border-bottom: var(--divider-width) solid var(--divider-color);
    z-index: 1;
    padding: 0px;
    height: 40px;
}

div.workspace.is-right-sidedock-open div.sidebar-toggle-button.mod-right>div.clickable-icon,
div.workspace:not(.is-right-sidedock-open) div.sidebar-toggle-button.mod-right>div.clickable-icon {
    padding: 0px 12px 0px 12px;
    border-radius: 0px;
}

body>div.titlebar>div.titlebar-inner>div.titlebar-button-container.mod-right {
    background-color: var(--background-secondary-alt);
    border-bottom: var(--divider-width) solid var(--divider-color);
    height: 40px;
}

body:not(.is-focused)>div.titlebar>div.titlebar-inner>div.titlebar-button-container.mod-right,
body:not(.is-focused) div.workspace.is-right-sidedock-open div.sidebar-toggle-button.mod-right,
body:not(.is-focused) div.workspace:not(.is-right-sidedock-open) div.sidebar-toggle-button.mod-right {
    background-color: var(--tab-container-background);
}

.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-right-space .workspace-tab-header-container:after {
    position: fixed;
    width: calc(var(--frame-right-space) + 42px);
}

.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-right-space .workspace-tab-header-container {
    padding-right: calc(var(--frame-right-space) + 42px);
}

body:not(.is-popout-window):not(.is-grabbing):not(.is-fullscreen) .workspace-tabs.mod-top .workspace-tab-header-spacer {
    -webkit-app-region: no-drag;
}

body:not(.is-popout-window) div.side-dock-actions:before {
    content: "\2723";
    font-size: 30px;
    -webkit-app-region: drag;
    text-align: center;
    margin-left: 1px;
}

/* COMMENT OUT BELOW IF YOU DO NOT WANT THE BACK/FORWARD BUTTONS ADDED TO THE LEFT RIBBON */
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-forward,
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-back {
    display: inline;
    position: fixed;
    left: 0;
    width: 43px;
    padding: 0;
    margin: 0;
    text-align: center;
    height: 26px;
}

body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-forward {
    bottom: 105px;
}

body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-back {
    bottom: 140px;
}

body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-forward>span.history-counter,
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-back>span.history-counter {
    display: none;
}

body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-forward>svg,
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-back>svg {
    vertical-align: middle;
    width: 20px;
}

Ok wanted to report back that I figured it out!! It had to do with the .is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-right-space .workspace-tab-header-container:after selector which was trying to make room on the very last set of workspace tabs container for the window buttons :) I also got the right sidebar to work well now too! 🥳

Here is a demo video showing all the buttons working nicely now :)

Obsidian_nHanmR4Ixn.mp4

Updated to work with the new Tab stacking (sliding panes)!

Added a "button" icon for dragging the Obsidian app window due to having to turn off the -webkit-app-region drag of the top bar (where native title bar usually is) to get other parts of Masonry to work properly.

Added the back/forward navigation buttons to the bottom of the left ribbon.

Obsidian 0.16.2 (Installer 0.15.9) on both OSes.

Works great on Windows 11!

macOS 12.5.1: Sliding panes work and the dragging button is visible, but can't see the back/forward buttons. :(
Tried:

• a test vault, default theme, restricted mode, with only latest masonry.css snippet enabled: No f/b buttons.
• sandbox vault, only added masonry.css snippet and enabled: No f/b buttons.

Willing to take screenshots or poke around. Just let me know.

Cheers!

@trainbuffer unfortunately I do not have a Mac to test on :( May need to find an experienced CSS person to test on a Mac and see if they can troubleshoot. I am happy to update this gist if someone can provide the fix necessary for Macs :)

I played around for a while but couldn't figure it out. If I hear anything, I'll let you know. Not your fault, of course, but the first obsidian snippet I've come across that behaves differently on Windows and macOS. lol

For the time being on the mac, I used Commander to add forward/back buttons to the ribbon. I'd rather them down above the vault picker (like your snippet) but that's for another day. Anyway, thanks again.