Fix visual differences between regular and energy dashboards

[Nezz]

Proposed change

Fix visual differences between regular and energy dashboards. This is an improvement for the blurring introduced in #20473 which will go live in 2024.5.

The energy dashboard is structured like this:

<hui-view id="view" />

Wheres lovelace is:

<div id="view">
  <hui-view />
</div>

This results in the background getting applied differently on the two kinds of dashboards.

In the unscrolled state lovelace looked like this:

With this fix, the background will extend on lovelace behind the header, matching the energy dashboard:

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

Example configuration

app-header-backdrop-filter: blur(20px)
app-header-background-color: rgba(128, 128, 128, 0.3)
background-image: "center / cover no-repeat fixed url('something.jpg')"

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion: Add css var for header webkit backdrop filter #20473
• Link to documentation pull request:

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

[Nezz]

@bramkragten would it be possible to get this into 2024.5?

[piitaya]

@Nezz Can we also use the same structure as regular dashboard for energy dashboard?

<hui-view
  id="view"
  .hass=${this.hass}
  .narrow=${this.narrow}
  .lovelace=${this._lovelace}
  .index=${this._viewIndex}
  @reload-energy-panel=${this._reloadView}
></hui-view>

becomes

<div id="view" @reload-energy-panel=${this._reloadView}>
  <hui-view
    .hass=${this.hass}
    .narrow=${this.narrow}
    .lovelace=${this._lovelace}
    .index=${this._viewIndex}
  ></hui-view>
</div>

[Nezz]

Sure, I'll update this branch to see how that looks

[Nezz]

The CSS change is still needed to ensure that the image is on the same element as the padding, but otherwise it should be good to go.

[bramkragten]

This should be reverted I think.

The issue is that the background can be set with a theme variable --lovelace-background that can set on the view or with a config variable in YAML. Putting the background option a level higher means that the view theme can not set the background of the view, because it can not target anything above itself.

You can set the background on both #view and hui-view, but that will not give the best experience either when using something different than a solid color.

[bramkragten]

Or, a bit ugly... #20683