In the screenshot below, you’ll notice that the 3 different texts all line up along their top edge rather than their bottom edge (I put the 2 shapes there to accentuate this).
Is that normal? Because it means when you use multiple text elements (with different font sizes) on the same line, they don’t line up how you would expect. E.g. It makes table-like data look really bad.
This was a design choice that we made when building core Bubble and cannot change at this point, because the change would break every app. The thing to do here is to add vertical padding as needed.
I tried adding vertical padding, but it doesn’t solve the problem for dynamic texts. Vertical padding is just a fixed number, and text disappears if the text is bigger.
I have two use-cases of dynamic texts.
Overlay text at the bottom of image in a gallery. If I make the text box very big, then when the text is small, it floats up. If I make it small, then in case text is long, it makes the size of whole box bigger, causing imbalance with other boxes with small texts.
Tooltips: I want some tooltips to show above elements on Y axis. When tooltip text is longer, the tooltip box becomes bigger downward rather than upward, and it ends up covering the element itself. If I keep the tool tip box bit higher, then when the tool tip text is small, the tool tip looks hanging in the air and doesn’t look connected to the element in question.