Support for vertical tab stacking / portrait mode

Feature requests
1

This idea of FR came from sliding-panes plugin github FR (link)

I use Obsidian in portrait mode and unfortunately this results in awkwardly tall panes by default using this extension:

It would be great if one of the following was available:

  1. vertical stacking instead of the current horizontal.
  2. (better) NxM mode, or less generally two horizontal stacks one on top of each other :slight_smile:

This is also very important for the mobile application Obsidian.

4 Likes
2

I second this, it is really a good idea, and it would be a way to implement a roam-like running sidebar, which would be chef’s kiss!

1 Like
3

As a workaround, this can be implemented by a CSS snippet (final version of the snippet is near the end of the thread): Switch orientation on stacked tabs using CSS?

5

It looks like a mobile-only solution? But I don’t see a way to open stacked tabs on mobile (iPhone). Hence I’m confused.

I support the request above :+1:

6

The stacked tabs feature was removed from phone-size devices.

1 Like
7

I’m trying to implement the snippet on desktop but I’m still having issues. This is what I have now but I’m still having issues with tab header being folded as it is being scrolled, and the content of next notes are blank unless clicked on. Can the original CSS thread be reopened or shall it continue here?

.mod-vertical .mod-stacked .workspace-leaf,
.mod-stacked .workspace-tab-header {
  width: var(--tab-stacked-pane-width);
  max-width: unset !important;
  min-width: unset !important;
  left: unset !important;
  right: unset !important;
}

.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container {
  flex-direction: column;
  overflow: hidden auto;
  max-height: 100%;
}

.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header {
  width: var(--tab-stacked-pane-width);
  height: var(--tab-header-height);
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  box-shadow: 0 1px 0 0 var(--tab-outline-color), var(--tab-stacked-shadow); /* Adjust shadow for vertical layout */
}

.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner {
  padding: var(--size-4-2) var(--size-4-4) var(--size-4-2); /* Adjust padding for vertical layout */
}

.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-title {
  transform: none;
  text-align: left;
  text-orientation: mixed;
}
8

I think it would be best to start a new thread for the best chance of catching the eye of someone who can help (and in case anything relevant has changed in Obsidian since that thread). I believe the person who wrote the snippet isn’t very active around here at the moment.