Compact header

[maykar]

Proposed change

This compacts the header to combine both buttons and tabs. Additionally, this modifies views so their backgrounds extend behind the header in Lovelace. When using a transparent color or image for the header background the view's background will now show underneath.

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

Additional information

---

@ 320px wide

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]

ITS FINALLY HAPPENING 🎉 🎉 🎉 🎉

[balloob]

How will this work when the user has more tabs that fit the view? If you have found a solution for that that works, there would no need to be an option and we can always do it.

[maykar]

My previous PR added adjustments to paper-tabs in order to make scrolling work in such a way that the scroll buttons no longer take up extra space. So the tabs would fill the space between the buttons and still be scrollable without extra padding given to a hidden scroll arrow.

[poldim]

@maykar will this make the header by default compact on all views from all devices? Or will it just now allow it to be adjusted via themes but default to non-compact style?

[bramkragten]

@maykar will this make the header by default compact on all views from all devices? Or will it just now allow it to be adjusted via themes but default to non-compact style?

It will compact all Lovelace headers

[bramkragten]

Please don't react to closed PR's