Fix issue where help icon overlapped with header text on mobile devices

[pdong]

This fixes #3834

The headers are position relative and the help icons are position absolute to the top right.

This PR:

• Adds a sectionHeader class to the headers on the zwave config panel (this seems consistent with other section headers that have class names)
• Moves inline style to .sectionHeader
• adds right padding to the sectionHeader so that the text will wrap before it runs into the icon (padding is same width as the help icon). This should work regardless of what the translation string is.
• Adjusts the absolute positioning of the Zwave Node Management header's help icon to match the main header's positioning (it was sagging a bit). I'm guessing the text for this header should be moved to the the translation file

on iPhone X:
Before

After

Desktop after:

It was a struggle getting home assistant local dev setup and pointed to the front end. I wasn't able to fully get it pointed at my remote hass.io setup so sorry the screenshots are missing some of the node UI but that shouldn't affect the fixes (I did test the styles in-browser on my hass.io setup and it looks the same with addition of the extra cards.

[homeassistant]

Hi @pdong,

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

[bramkragten]

Great thanks! 👍