Header Variations Broken When Stretched Vertically

[infered5]

If you were to CSS your way into stretching any of the alternate Header classes (header-open, header-right and header-contained) vertically, an additional colored bar appears below the header, below where the text happens.

The easiest way to show this is to use Layout Card, which helps tremendously with card placement and is often used.

Also occurs when using Panel layout, stretching the card to fill the bounds of the screen. This may accidentally happen when using a Grid or Vertical Stack card using a Panel layout on your view.

Shown is the stretched horizontally (and, importantly, vertically) formatting of the normal Header class:

Header-open:

Header-Contained:

Header-Right:

Pictured is header-right, under a Panel view. This also happens with the other subtypes.

Curiously, does not happen with the standard header class.

Font size does affect it, but never makes it go away fully.

[infered5]

#95

PR created for this issue.

[lefty1687]

this worked for me:

Add the following under the ha-card.header-right > ha-markdown.no-header:

     ha-card.header-right > ha-markdown {
        border-radius: 0 20px 0 0;
        height: 100%;
        display: flex;
        align-items: flex-end;
      }

for header-contained, change ha-card.header-contained > ha-markdown:

     ha-card.header-contained > ha-markdown {
        border-radius: 20px 20px 0 0;
        height: 100%;
        display: flex;
        align-items: flex-end;
      }

and for header-open add this:

      ha-card.header-open > ha-markdown {
        border-radius: 0px 0px 0px 0px;
        height: 100%;
        display: flex;
        align-items: flex-end;
      }