🔹 Card-mod - Super-charge your themes!

really need to get back to this, and for a specific reason: as you can see in the screen shot, there is a sharp horizontal line below the badges.

It was like this with the manual card-mod theme yaml in our themes, but it also is happing now we have the core option for badge in the header:

header:
  badges_wrap: scroll

I have only found a single variable in the frontend source that could be influencing this, but since it was also happening in the manual card-mod theme, I am still not 100% sure that is it. see the issue I filed here, but was closed too soon imho setting badges_wrap to a view badge (with box-shadows) causes horizontal line//border of the section below · Issue #25691 · home-assistant/frontend · GitHub

bottom line: when applying a box-shadow to the badges, and use the scrolling style, either in card-mod theme or in core frontend options, the line is show. leave out the scroll and all is well.

I really need help identifying what I am seeing here, I mean which element it is that causes the sharp line. Is it the .badges, or is it the sections section itself, to maybe even another element in the view

silliest thing of all, it does even happening when there is nothing to scroll at all…:

without badges_wrap: scroll

I can apply:

    :first-child $:
      hui-view-header:
        $:
          hui-view-badges $: |
            .badges {
              padding-bottom: 18px;
            }

to make the cut-off less obvious, (looking closely it still is there…)but that is no good either, because it moves everything down, creating a waste of space.