CSS to wrap page title/action-bar on small screens

General
1

On small screens, if the total width of the page title plus the action bar icons is wider than the screen, the title is clipped. On very small screens with a half-dozen or so action bar icons, this makes the title complete hidden.

I’ve been fiddling with STYLES trying to make it wrap, so that the title and action bar will appear on separate lines if needed, but my css-fu is not quite there yet. Any suggestions?

2

Try this - seems to work for me:

#sb-top {
    height: auto !important;
}

#sb-top .main #sb-current-page {
    width: auto !important;

    /* adjust this as needed - minimum with for the current page name/input */
    min-width: 5em;
}

#sb-top .main .inner .wrapper {
    display: flex;
    flex-wrap: wrap;
}

#sb-top .sb-actions {
    position: relative;
    right: initial;
    top: initial;
    text-align: initial;
}
3

Perfect! Thanks Joe. Nicely done.

4

I’ve been thinking of introducing a second row configurable button bar along the full width of the top of the screen for mobile. I too find that there’s a bunch of potentially useful buttons I’d like to have on a touch screen, but not enough space right now.

Thoughts?

5

Sounds good! Maybe also have the option to pin the toolbar to the bottom of the screen, for thumb reachability.

6

Sadly that’s technically almost impossible to do, at least on iOS I think. Although I’ve noticed that Discourse somehow seems to have this working so who knows.

7

A second row of action icons at top of page could mostly be done right now with a Widget, right? Although a shorthand for grabbing feathericons in that context would be helpful.

8

I’ve noticed that discourse does adjust the edit box size and has such a bar. It can actually be doable

https://www.perplexity.ai/search/How-does-discourse-fAaGFaPeQayYyjaRBnxWkA

9

I like how Obsidian’s mobile app has a button row above the keyboard that is scrollable. One thing we could do is map commands w/ icons to it (like the buttons up top). Additional pain points I’ve hit on mobile:

  • No undo ability
  • back-tick requires three clicks and a long hold