Header styling & paper-tabs improvements

[maykar]

Proposed change

This changes the styling of the header across most of the frontend. It removes the large amount of space on the left side of the screen and allows tabs to span the width of the header.

Additionally, this adds an ha-tabs element to modify paper-tabs. It adds:

• Optimized space for scroll arrows (keeps them "inside" the scrolling container element and only take up space when needed)
• Tweaks to scrolling to make it fluid (no jumping while scrolling when scroll arrows hide/show).
• Scrolls active tab into view if needed.

This is also to help pave the way for compacting the header later on.

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

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

[bramkragten]

The main-title needs margin left when there is no button, I think 16px.

[maykar]

For main-title I only removed app-toolbar ha-menu-button + [main-title]

This remains

  app-toolbar ha-icon-button-arrow-prev + [main-title],
  app-toolbar ha-icon-button + [main-title] {
    margin-left: 24px;
  }

[bramkragten]

For main-title I only removed app-toolbar ha-menu-button + [main-title]

This remains

  app-toolbar ha-icon-button-arrow-prev + [main-title],
  app-toolbar ha-icon-button + [main-title] {
    margin-left: 24px;
  }

Yes, but the [main-title] was never shown with an element in front. The title should align with the tabs.

[bramkragten]

Looks good!

[bramkragten]

Checking the material guidelines, I wonder we can could offset the items, or show an icon to show that there are more items

https://material.io/components/tabs#scrollable-tabs

[poldim]

@maykar are you sure you meant fixes #7107? That wasn’t about the header but rather page layout.

BTW, I’m hoping hiding the header is made into the core since CCH is no longer supported!

[maykar]

Commented on the original issue, it was a misunderstanding on my part, tagged bram to reopen.