Mobile friendly toolbar

Tricks & Techniques
21

Not sure if there’s a switch somewhere. This seems to be an issue with however a mobile device is detected (Usually screen size or screen size+touch enabled)

If I had time I would do a dig through the code to figure it out and make a patch but for now maybe the best option is to do a bug report. I could do a test run on my tablet (Samsung S6) to see what happens there but I’m expecting the same as iPad

22

As @bgrolleman suggested this is due to the screensize query used to toggle the style change in css, this is currently set fixed to 600px, a common limit for mobile devices. Tablet like iPads typically don’t fit into this though. You can increase this by applying the same styles for bigger screens, too. You can use a space-style snippet like below. This uses 768px as the limit, which is commonly used to fit tablets, you can increase the value in case it is not enough, just remember to reload after adding or changing it.

```space-style
@media only screen and (max-width: 768px) {
  /* Style the menu as a bottom bar */
  #sb-top .sb-actions.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    background: var(--top-background-color);
    width: 100vw;
    box-shadow: 0px 4px 8px black;
    justify-content: space-around;
  }
  #sb-top .sb-actions.bottom-bar button {
    padding: 1em;
    margin: 0;
    height: unset;
    width: unset;
  }
  #sb-top .sb-actions.bottom-bar button svg {
    margin-bottom: -5px;
    height: 1.4rem;
  }
}
```
23

I've been looking for something exactly like this, to make silver-bullet more usable on a mobile device! many Thanks!

I've in turn, built upon it and made the icon toolbar dragable (e.g. scrollable) in case there are to many buttons on it to display:

You can find my style config here:

1 Like