Editor tabs icons became tiny... good time to learn a shortcut

Tips
1

I appreciate the Bubble team for revamping the Editor UI, but i think the tab icons are way too tiny now.
Now is a good time to mention that you can quickly switch between the Editor, Workflow and Data tabs using “Ctrl+T”. Hopefully this will save you the frustration of dealing with the tiny icons.

I know that bubble development is very mouse-heavy, but it would be great if more keyboard shortcuts were added.
I would love for the expression editor to have more shortcuts so we wouldn’t have to constantly reach for our mouse.
What are your thoughts on this?

2

This was my first through… yes I need to wear glasses since a few month to see clearly little things… ahahaha
I thing the design team member are young and don’t have any view issue :sweat_smile:

3

Yeah… at first I assumed there was a loading error with the icons… then I checked in a few other apps, and they were all the same…

But I agree… they’re way too small… (and why did they need changing?)

And what’s with all these small and irrelevant UX changes, whilst the major bugs and limitations go unfixed month after month, year after year?..

4

As a person gifted with myopia and astigmatism I don’t like this change at all :face_with_raised_eyebrow:

5

I did not know this! Thanks for the tip-

6

Rest assured because you can make new apps quickly by going to bubble.new :crazy_face:

7

It seems that I am the only one who liked it :sweat_smile:…

But agree with Adam, there are other things that they should be delivering first…

8

I agree and provided feedback to them about it. I keep thinking I should click the Design icon to close the panel because it looks like a “X”. :neutral_face:

9

Craziness. Why are them so small now? No improvements whatsoever

10

Zoomed the page to 300%. Problem solved

image
image1919×911 46 KB

Downside is I can’t even work anymore but hey at least the icons are bigger :sunglasses:

11

I solved it with a tiny chrome extension. It is no way guaranteed to work in the future but for now, it works :slight_smile:

See the demo below:
chrome_ayu2Adofw9

And these are the source codes, just two simple files. I set the delay to 5 seconds, but you can set it to something else.
content.js

setTimeout(() => {
  var buttons = document.getElementsByTagName('button');
  for (let i = 0; i < buttons.length; i++) {
    if (["Design", "Workflow", "Data", "Styles", "Plugins", "Settings", "Logs"].includes(buttons[i].getAttribute("aria-label"))) {
      buttons[i].firstChild.firstChild.classList = [];
    }
  }
}, 5000);

manifest.json

{
  "manifest_version": 3,
  "name": "Bubble Icons Resizer",
  "version": "0.1.0",
  "description": "Make Bubble Editor icons on the left bigger",
  "content_scripts": [
    {
      "css": [],
      "js": [
        "content.js"
      ],
      "matches": [
        "https://bubble.io/*"
      ]
    }
  ]
}

And this is how to install from your local:
chrome_Cdu1i1VDIh

12

Did they just fix this issue silently :slight_smile:?

They are not tiny anymore without my extension.
image

13

Yeah, they’re not tiny for me anymore either. Silently or not, kudos to them if they saw this thread (I know lots of Bubble folks monitor the forum) and made the adjustment. We do have to deduct a few points for the icons being so tiny in the first place, but, eh, stuff happens.

14

For those of you, who would like to get the old sidebar back:
chrome_4Q7yzn6WFl

Just change the content of this file:

to:

setTimeout(() => {
  var buttons = document.getElementsByTagName('button');
  for (let i = 0; i < buttons.length; i++) {
    var label = buttons[i].getAttribute("aria-label");
    if (["Design", "Workflow", "Data", "Styles", "Plugins", "Settings", "Logs"].includes(label)) {
      var titleSpan = document.createElement("span");
      titleSpan.appendChild(document.createTextNode(label));
      titleSpan.style.fontSize = "10px";
      buttons[i].appendChild(titleSpan);
      buttons[i].style.height = "60px";
    }
  }
}, 5000);

If you spend a lot of time in the editor, maybe someone should spend some time on a chrome extension to improve this experience. That would make some jobs easier on Bubble. A keyboard extension maybe? What do you think is the demand for an extension like this?

15

Same, so confusing, I though I accidentally zoomed out…

16

Surely you’re not all mac people? Ctrl-T is a browser shortcut to create a new tab. In every browser I’ve ever used. WTF?
I really want this toggle shortcut, but ctrl-t gives me a new tab!