Forum Academy Marketplace Showcase Pricing Features

Is it possible to widen the second toolbar of bubble UI?


I am referring to the second collapsible toolbar which is within the bubble editor’s UI itself.

I am curious if it’s possible to make this second toolbar wider, and I am just missing something.

I would like to get an overview of the entire hierarchy of my elements, despite maybe long names, even if only occasionally, or just at a glance.

If it’s any help, I was able to isolate two CSS classes which I was able to adjust with my browser’s web dev tools:

  • .toolbox-pane
  • .element-caption

Since there is a collapse option, maybe there could be an expand option? I was testing with the width of these two elements set to 225px and it’s nice. I took the fix all the way home with a switch via a Chrome extension. I haven’t run into anything funny, so far. I am also working at 4K, so I have plenty of screen space.

Is this kind of UI modifying encouraged?

Hi @dman.exe !

Can you publish or share the code for the Chrome extension?

I would like to expand the toolbox as well!

I am workin on a 43 inch display and the toolbox is small. :frowning:

Hey there, there is actually not any code I can share. You can use the Inspect Element tool to discover the class names of the toolbar UI elements. From there, you can adjust with size as you’d like. I provided the class names so you can easily search for them or target them.

You could write a function using native JavaScript, and save it to a bookmark. For example - two bookmarks. One which finds the class of the toolbar, expands it, and one that resets the width back to normal.

I do not take any responsibility for the effects of modifying the UI, for bubble. I would imagine perhaps, possibly, there is some kind of a relative calculation performed between the edge of the toolbar and the canvas area where the app is actually being developed.