Harmonize the font sizes on area and device page

[spacegaier]

Breaking change

Proposed change

If there are no automation, scenes or scripts for a device, the corresponding note text uses a too big font size, not matching the rest of the visual feel. To be consistent, I applied the same font size, to when there are created elements in those boxes as well.

Same applies to the area display.

Note: Before the change, the paper font size for a sub header was applied.

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

[zsarnett]

hmm I am not sure if we should use paper sizes. Can we just use a px?

[spacegaier]

@zsarnett I would be fine either way. In many places int he frontend we do already set the font-size fix to 14px, but on the other hand we do have the same paper size used in our haStyle:

frontend/src/resources/styles.ts

Lines 92 to 99 in 7251e80

	export const haStyle = css`
	:host {
	font-family: var(--paper-font-body1_-_font-family);
	-webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing);
	font-size: var(--paper-font-body1_-_font-size);
	font-weight: var(--paper-font-body1_-_font-weight);
	line-height: var(--paper-font-body1_-_line-height);
	}

Should we wait for @bramkragten to chime in as well?