Move attribute pre styles to ha-attribute-value component

[joshmcrty]

Proposed change

Move pre styles for attributes from ha-attributes component to ha-attribute-value component. I believe these styles were left behind when #17249 was merged. This change builds on one of my previous PRs (#18290) that restored text wrapping. This restores the font styles too.

Before:

After:

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

Create a sensor with dict_attr_long value and view in dialog:

template:
  - sensor:
      - name: test_long_attr
        state: ok
        attributes:
          dict_attr_long: >-
            {% set LONG_VALUE_1 = "Morocco lies close to the Azores–Gibraltar Transform Fault." %}
            {% set LONG_VALUE_2 = "Morocco lies close to the Azores–Gibraltar Transform Fault." %}
            {%- set DICT = {
              'value_1': LONG_VALUE_1,
              'value_2': LONG_VALUE_2
              } -%}
            {{DICT}}

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion: Wrap dict attributes #18290
• 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

[ildar170975]

Just curious - are there any considerations for this? I usually use units with zero values, but I am not a css expert .

[joshmcrty]

No issues in this case. Lengths in CSS can be zero with no units. It's a habit I've had for like 15 years, I read somewhere that it was a "best practice" back then and it stuck. It's potentially a problem with using calc() and some other "newer" CSS features, but it's more of a personal preference than anything. I don't feel super strongly about it, especially on an open source project that I am just a contributor to. I'm happy to add the units back if that's the general preference for HA.

[bramkragten]

I use zero without units too, so 🤷‍♂️