The customizable page header buttons hide the page title (Mobile version)

[Missionary-OSBS]

Issue

• I use Obsidian on iPhone and the customizable page header buttons just hide the page title.
  

• Not to mention, the page header gets thicker and does not look neat.

Alternative

1. I have to orientate my phone horizontally to see the page title.
   

2. Reveal active file in navigation so I don't have to turn the phone horizontally.

[daxmonson]

I often use Obsidian in slide-over mode on ios and having buttons on the title obscures the name. Would it be possible to add an option (in plugin or style settings) to keep the buttons there, but have the page's title be on the left side of the page vertically? That would be similar to the sliding panes plugin (which isn't great on mobile). This might solve the users issue in the parent comment too. Regardless, your plugin is essential, thanks for it.

[kometenstaub]

I don’t know why it would get thicker, probably because you added too many buttons for the width.

Regarding vertical titles, that might be an option, but that’s beyond my CSS skills.

[kometenstaub]

This plugin is also in maintenance mode. I don’t want to add any more features besides maintaining compatibility until the new Commander plugin has implemented the full feature set of this plugin.

[daxmonson]

I totally understand that and it's great as is except when I have it in slide over on ios with many buttons added. I think I figured out the vertical text using some of the CSS from the early sliding panes plugin prototype. I'll just try to use that as a snippet in there. Thanks

[kometenstaub]

If you want you can also post it here for others to see.

[Missionary-OSBS]

Sorry, I'd edited something to cause that error. Now it gets back to normal. I tried to remember what I did to get back to normal, but couldn't..

[daxmonson]

Sure, it's something like below. It's not always going to work out of the box though depending on other plugins and themes installed. For instance, now I've lost close x functionality. Will play around with it more and figure it out when there's time. Maybe it'll help someone start:

/* first we'll add a bit of gap for the title to sit inside of */
.workspace-leaf-content {
padding-left: var(--header-width);
position: relative;
}

/* this is where the magic happens */
.view-header {
writing-mode: vertical-lr;
border-right: 1px solid var(--background-secondary-alt);
border-left: 2px solid var(--background-secondary-alt);
border-top: none;
border-bottom: none;
height: auto;
width: var(--header-width);
position: absolute;
left:0;
top:0;
bottom:0;
}

/* active titles have different border colours */
.workspace-leaf.mod-active .view-header {
border-right: 2px solid var(--interactive-accent);
border-bottom: none;
}

/* unset the title container height and swap padding */
.view-header-title-container {
height: unset;
padding-left: unset;
padding-top: 5px;
}

/* fix the long-title-obscuring shadows */
.view-header-title-container:after {
width: 100%;
height: 30px;
top:unset;
bottom: 0;
background: linear-gradient(to bottom, transparent, var(--background-secondary));
}
.workspace-leaf.mod-active .view-header-title-container:after {
background: linear-gradient(to bottom, transparent, var(--background-primary-alt));
}

/* swap the padding/margin around for the header and actions icons */
.view-header-icon, .view-actions {
padding: 10px 5px;
}
.view-action {
margin: 8px 0;
}

/* get rid of the gap left by the now-missing horizontal title */
.view-content {
height: 100%;
}

/* make the fake drop target overlay have a background so you can see it. /
/ TODO: figure out how the fake target overlay works so we can put the title back, too */
.workspace-fake-target-overlay {
background-color: var(--background-primary);
}

[Missionary-OSBS]

Well, the CSS doesn't look like it functions correctly.

• Before
  

• After
  

By the way, I realize if I turn on Readable line length, it would be nice. But I prefer to turn it off...

[daxmonson]

Yea, it’s definitely not perfect, but for me it got it most of the way there (I had readable line length on).