Pro 1.2.1 - Headline element alignment issue

Hey,

Looks like the headline element has some extra space on the left so it won’t align properly with other elements, like the text element.

I’ve checked for extra padding or margins on the headline element but there’s none.

There’s a URL and login info in a secure note.

Thanks for pointing this out. There’s a control called “Text Content Margin” that has a 5px default. It’s mainly there so there’s proper spacing if you enable the graphic option. We can see how this might not be optimal as a default value so we’ll look into alternatives.

I see, I didn’t think of that. Maybe the 5px margin could be applied when you toggle the graphic option?

Howdy @JvP

Thanks for writing in! What we’ve done for now is update the defaults so that there is 0px for the Text Content Margin control and 0em 0.5em 0em 0em for the Graphic Margin, which eliminates any sort of excess space by default. What this will result in is a standard heading with no space by default, and when a graphic is present, a tiny amount of spacing will be applied to show the intended effect for the graphic like so:

The reason for the 5px margin on the text and graphic was copied over from how the Button Element is setup by default. The Button Element has this spacing around both text and graphic so that if users turn on a graphic, they can experiment with flexbox layouts using row, row-reverse, column, and column-reverse with each option looking decent out of the box, and then users can tweak further when they decide what they want. This approach works well in the button as it’s sandboxed by the visual container around it, but as most headlines will not have this, we’ve gone ahead and tweaked this a bit here to have a more sensible default.

Hopefully this helps and thank you for your feedback!

1 Like

Thanks for the detailed explanation!

Looks like a nice solution :thumbsup:

No problem, @JvP. We appreciate your helpful feedback. :slight_smile: