Tapbar of minimalist-iOS-tapbar theme interferes with iOS Home Indicator after HA 2025.5 update

[guger]

Describe the bug
After the update to HA 2025.5, the tapbar of the minimalist-ios-tapbar theme started interfering with the iOS Home Indicator. It looks like the padding at the bottom of the screen is removed. Furthermore, the touch indicator is not a colored circle anymore, but rather a grey square.

Has anything changed with the HA WebView in that update?

Screenshots

[mark1foley]

Hi,

I also noticed the change in behaviour with the "minimalist-ios-tapbar" theme. I don't have a complete answer but thought I would at least share a work around that I found. In the theme I changed the bottom padding setting in this section:

      .toolbar {
        height: var(--header-height) !important;
        padding: 10px 0px !important;
        background: var( --ha-card-background, var(--card-background-color) );
      }

I changed the line "padding: 10px 0px !important;" to "padding: 0px 0px !important;". This moves the icons up on the screen and exposes an indicator line (that I can only assume was previously hidden due to the padding) under the icons as shown in the image below.

Like I mentioned, it's not a complete solution but at least you get some indication of which page you are on. For this reason I have not updated the theme file and submitted it for inclusion in the next release.

To implement, you can either modify the "minimalist-ios-tapbar.yaml" file in the themes\minimalist-ios-tapbar folder. You then need to reload the themes by pressing 'c' in HA running in a browser and select "Themes". But this will be overwritten next time Minimalist UI is upgraded. Or you can make a copy of the file, make the change, and update the "card-mod-theme" to something specific to you. Note that any changes made to "minimalist-ios-tapbar.yaml" in a future release will not be applied to this file and you will need to do that manually. You will then need to reload the themes and select the new them in your user options.

As an aside I made one other change to the minimalist-ios-tapbar theme which I found very useful. I removed the following two sections:

      paper-icon-button {
        display: none;
      }

and

      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }

This exposes the HA menu (see image below) which I find useful especially as you get an indicator when there are active notifications.

The menu is shown by the "minimalist-mobile" theme but not the minimalist-ios-tapbar theme. I have no idea why this is the case. Also, I don't have a deep enough knowledge to understand what the code I removed is trying to do or why the original author wanted to supress the display of the menu so I haven't submitted it for inclusion in the next release.

Hope that helps.

[mark1foley]

Thanks @mxilievski! I applied your changes (#1638) to my theme and it works great.

BTW, do you understand why the display of the HA menu is being supressed by this theme? Specifically, this code:

      paper-icon-button {
        display: none;
      }

and this:

      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }

I get that not everyone wants to see the icons for the additional menus. But I think it would be better if this was controlled by a variable set in the theme rather than hard-coding the suppression.

[Depechie]

Indeed, I'm such a person who likes the fact that the menu is not shown

[mxilievski]

Thanks @mxilievski! I applied your changes (#1638) to my theme and it works great.

BTW, do you understand why the display of the HA menu is being supressed by this theme? Specifically, this code:

      paper-icon-button {
        display: none;
      }

and this:

      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }

I get that not everyone wants to see the icons for the additional menus. But I think it would be better if this was controlled by a variable set in the theme rather than hard-coding the suppression.

I believe it was a design choice, feel free to customize it per your needs 😀