Beautify ha-attribute <pre>

[spacegaier]

Breaking change

Proposed change

In case an attribute is in YAML form, it will be rendered as a <pre>. That however was not nicely styled so far.

I know it looks a bit jarring that we suddenly have an attribute left-aligned, but it is a lot easier to read I think. Nonetheless, I added a screenshot for right aligned as well, with the rest of the issues fixed (no more overflowing characters at the ride side).

Before:

After (left):

After (right):

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

I think we should leave it right-aligned, having this much content in an attribute is a bad practice I guess, and shorter content would make sense to have right-aligned.

This content is not really meant to be easily readable I guess? As the individual keys are also attributes?

[spacegaier]

Yes, the attributes are basically the split up keys from the YAML. Not sure why this integration does it that way.

Another case where I have seen YAML resulting in this <pre> is with HACS when updates are available. But also here, a user does not really have to check that value, as there is the HACS UI.

Before:

After: