Move or unfloat Status Bar with CSS?

[hollowhamster]

I keep running into this when long form writing:

When hitting the bottom you’ll keep being at the bottom until you scroll up, and then you have to repeat.
That, or expand Obsidan window to ~900 pixels even though the writing area only is 550 pixels. And that’s with backlinks removed from it.

I’ve tried Hider, but I want the information displayed. (And hotkeys and my memory don’t work well together.)
I just don’t want it to hide my text and working area, or at least not where I’m actively typing, or at least at least not where I spend most of the time typing.

Any of 4 options would work (and probably others that I haven’t thought of):

• Make it vertical instead of horizontal.
• Make it auto-hide until mouse hoover.
• Move it to title bar of document (a lot of unused space there)
• Make it hard-cover the whole bottom row, instead of floating over the text/working area. As in the bottom 20 pixels are dedicated to the status bar and the writing/working area won’t go in there, just like it won’t go into the document tree.

Are any of these possible with CSS?

[dawni]

This CSS raises the margin where text is overlapping the status bar:

body:not(.is-mobile) .cm-scroller {
	margin-bottom: 52px;
}

Set it to a number you like.

Or if you prefer, there are several “typewriter” plugins that limit the range of or absolute position of the edited line within the viewport: Obsidian Community - Search “typewriter”.

[ariehen]

Some other options to try as well:

.status-bar {
    flex-direction: column;
    flex-wrap: wrap;
    display: inline;
    max-width: 200px;
}

I’m not a fan of this one as it may shift around depending on the content, and seems more in the way. If you have two tab groups open, it covers the body content again.

---

body {
    --status-bar-position: static; /* fixed */
}

Here are the status-bar variables you can easily adjust:

  --status-bar-background: var(--background-secondary);
  --status-bar-border-color: var(--divider-color);
  --status-bar-border-width: var(--border-width) 0 0 var(--border-width);
  --status-bar-font-size: var(--font-ui-smaller);
  --status-bar-text-color: var(--text-muted);
  --status-bar-position: fixed;
  --status-bar-radius: var(--radius-m) 0 0 0;

---

.status-bar:not(:hover) {
    opacity: 0;
}

[hollowhamster]

Holy! I did not expect to get three different versions that does exactly what I wished and simply solves my problem.

Big thanks, much obliged!

Now I’ll just have to decide which one to use. Margin, fixed, and hover all worked like a charm