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;
}

I have been playing around a bit with some CSS to do what I refer to as "Masonry Mode" but others I think would call it similar to Sliding Panes but without the collapsing spines. I think this may be similar to what Pane Relief has added to its plugin. My goal here is to do something with pure CSS so people don't have to install a plugin and then can just turn the CSS snippet on/off when they want to use it.

The code in this gist is all you need! You can adjust the fixed width of the panes by changing the second line variable --masonry-split-widths: 930px;. Just throw this all in a CSS snippet and enable it.

UPDATE: There are no longer the caveats on the right sidebar button placement and the window minimize/max/close buttons! Everything is working smoothly and naturally with the updated code in this Gist. See here for details and a new demo video: https://gist.github.com/GitMurf/22efc95dee40c5c4567659c506c77e10?permalink_comment_id=4288474#gistcomment-4288474

Let me know if you have any questions or issues!

Here is a quick demo video (no audio):

Obsidian_mB0pGYMFZg.mp4

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.