2024.11.0 - weird gap at the top

[rosicenko]

Checklist:

• [ X ] I updated to the latest version available
• [ X ] I cleared the cache of my browser

Release with the issue:

*Last working release (if known):2024.10.4 but probably also that one affected.*

*Browser and Operating System:chromium based browsers*

Description of problem:

After update to new version of HA 2024.11.0 there is weird gap at the top and when used with Kiosk mode there is empty gap instead of the header. So entire dashboard is also moved below this gap/invisible header.

A lot of interesting and important info discussed here: https://github.com/NemesisRE/kiosk-mode/issues/295

Javascript errors shown in the web inspector (if applicable):

Additional information: Probably happens also to another Themes.

[Nerwyn]

In the Kiosk Mode bug thread you mention that this is happening with the no mod version of the theme, but the view padding changes are made using card mod. I can reproduce the issue with the regular theme but not the no mod version.

I can see if I can add card mod styles that undo the padding changes if the header or footer are hidden, but am not sure if they'll work due to card mod style load order.

[elchininet]

In the Kiosk Mode bug thread you mention that this is happening with the no mod version of the theme, but the view padding changes are made using card mod. I can reproduce the issue with the regular theme but not the no mod version.

I can confirm that it doesn't occur with the No Mod theme (in 2024.9.1 and 2024.11.0).

[Nerwyn]

@rosicenko try the 2.2.0 alpha. I changed how top and bottom view padding is set in the card mod version of the theme so it'll disappear when --header-height is set to 0.

[Nerwyn]

I'm going to have to modify my fix to work with the Kiosk mode fix, as it does not account for the footer padding. While this isn't as noticeable, it causes unnecessary vertical scrolling in kiosk mode. I should restore --footer-height and have it check --kiosk-header-height.

[elchininet]

Checking for:

var(--kiosk-header-height, var(--header-height))

Should do the work, if --kiosk-header-height is not set it should fallback to --header-height.

[Nerwyn]

I actually removed the explicit setting of the header padding as it wasn't needed and was a little shorter than it should've been. I need to do what you've described but for the footer.

padding-bottom: var(--kiosk-header-height, var(--footer-height));

[Nerwyn]

@rosicenko @elchininet try the 2.1.10 alpha (brainfarted when calling the last alpha 2.2.0, this is a patch fix). It uses the latest version of Kiosk mode's --kiosk-header-height variable to fix the top and bottom paddings as needed.

[rosicenko]

Tried with the latest kiosk mode update and 2.1.10 alpha - Mod and No mod option and this issue still persist. Running also latest HA companion app.

[Nerwyn]

Can you try clearing app cache? Or trying on a browser and clearing cache there?

[rosicenko]

My bad. You are right! Thank you

[Nerwyn]

Fixed in 2.1.10