Show user friendly attribute names in picker

[spacegaier]

Breaking change

Proposed change

Follow-up to #7313.

1. Fix regex for "id" to "ID" replacement by using word boundaries (to not convert "humidity" to "humIDity") => already covered by Fix capitalization of state attributes #7448
2. Use the same conversion logic to show user friendly attribute names in the picker. The actual returned value to the card / editor / dialog is still the original real snake_case attribute name. Only the visual display part is changed. Works both in the newly changed weather card editor (Use attribute picker for sec. info in weather card editor #7335) as well as in the existing use cases such as the automation editor.
3. Fixes the attribute display, that previously broke attribute names into multiple lines due to missing flex-grow (see "Warning 1").
4. Allowed the attribute values to use up to half the popup size for the non-narrow display.
5. Prevent capitalization in more-info-sun (Previously showed "Setting In x hours", now "Setting in x hours").

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

Additional information

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