On mobile I’m usually using portrait mode, and I’m wondering if it would be possible to switch around the orientation of stacked tabs. That is to make them stacked top to bottom,
instead of left to right.
I’ve seen a discussion on vertical tabs, which is similar, but I wonder if this is possible to achieve using the stacked tabs.
Things I have tried
I’m on vacation just now so the need suddenly presented it self with a little less availability of tools and stuff. I do know some CSS, but not that familiar with doing changes for mobile only. I’m also not sure if the stacked tabs are easily movable or if there are other logic connected to them making them hard to move.
Are you on the Discord? The wizards in the #appearance channel probably know or would be happy to figure out if it’s possible. If you’re not on Discord I’d be happy to ask for you.
EDIT: I’m asking because I’m super curious about it now.
Thanks to Cawlin for posting this, I messed around with it for a few hours to achieve this solution. Sadly I was unable to get side shadows to work properly on mobile, so they were cut. Overall it wasn’t too complex, it just took a lot of poking around.
It does look promising, but there are two major drawbacks currently:
The files don’t fold, so screen estate is always taken up by the expanded notes.
That shadow is also taking up to much space
So thanks fit the efforts so far, FireIsGood!
And man, I wish I was able to debug/edit better stuff like this in CSS on mobile.
I’m mostly inactive, as if I restart I fear I’ll be swalloved up being too active as I’ve been before. It just so time consuming… (I’m already spending way too much time on this forum) But thanks for asking on my behalf.
Now, if only those last two thingies could be fixed…
Hey again, back here for a quick fix! (even though it’s 1am, shh)
Most of the changes are automatic but you can toggle off ones you don’t want with the Style Settings plugin like Cawlin said above.
The files don’t fold, so screen estate is always taken up by the expanded notes.
Fixed! File headers will now automatically fold similar to the horizontal pages and there’s an option to switch it to scrolling like the previous version had in Style Settings.
That shadow is also taking up to much space
Improved by default! The default size is now larger and with Style Settings you can increase it to 10rem if you have a really wide phone.
I’ve also made other improvements:
Fixed the snippet modifying desktop (now you can leave it on for synced vaults)
Left touch area now has the correct width (scrollbar was shrinking it)
Added diagonal bars by default (looks cool)
Added overscroll protection (scrolling in long pages will not move them off screen)
I’m mighty impressed, and very thankful. This is already going to be on for sure on mobile. I don’t have a wide phone, it’s rather narrow and high, so I’ve turned off the scroll area/shadow.
The only strangeness I see now is that occasionally the tab bar header doesn’t fold away, as shown in image below.
The notes doesn’t always focus on the new tab opened, but I can easily scroll down to find it so it’s just a minor thingy.
I also tried to add 5-6 tabs, and discovered that (even when fully folded) they do take up some screen estate. But yet again, a really minor thing, and I did open more files than I usually do.
But all in all, I stand in awe for this snippet, and will try to adapt some of the ideas related to style settings plugins in my other CSS stuff.
As seen on desktop obsidian, the last tab only has its regular width
In any case, I’ve added a setting to toggle the last pane to be full width.
The notes doesn’t always focus on the new tab opened, but I can easily scroll down to find it so it’s just a minor thingy.
Not very surprising, it’s crazy that vertical tabs even work. It’s probably something with how they programmed scrolling to tabs.
I also tried to add 5-6 tabs, and discovered that (even when fully folded) they do take up some screen estate. But yet again, a really minor thing, and I did open more files than I usually do.
That’s something I considered but didn’t think to do anything about. I’ve added an option to have smaller tab heights.
Also some more small improvements:
Added the ability to disable the scrollbar background if you wanted to
