Need help to convert existing code hiding More-Info Header and more to 2026.3

[BoneheadFraggle]

I have used this code for ages with card-mod, and recently converted to UIX, which works fine in 2026.2, but breaks in 2026.3.
I'd really appreciate help getting the old functionality back.

I got a starting point here (NemesisRE/kiosk-mode#514), but unfortunately, the threshold for understanding the tip is too high for me..

The goal is:

1. to conditionally hide the complete header in more-info for everyone - incl. me unless I'm in "admin mode", which is selected by turning 'input_boolean.hide_admin' off

2. to hide the "History" part of more-info completely

3. to make more-info dialog appear vertically centered, like it was in the early days.

Example 2026.2:

Vs 2026.3:

Theme code:

r62:
  uix-theme: r62

  # --- Card/Dialogs basics ---
  ha-card-border-radius: 10px
  ha-card-border-width: 0px
  ha-dialog-border-radius: var(--ha-card-border-radius)

  # --- uix: Root tweaks ---
  uix-root-yaml: |
    .: |
      /* Hide "Open in new tab" menu items (top right menu links) */
      a.menu-link[target="_blank"] {
        display: none;
      }
      /* Example: center toolbar (kept as comments)
      .toolbar ha-tab-group {
        display: flex;
        justify-content: center;
      } */

  # --- uix: More-info dialog tweaks ---
  uix-more-info-yaml: |
    .: |
      /* Conditionally hide the dialog header for non-me or when hide_admin is on */
      {% if user == 'me' %}
      ha-dialog > ha-dialog-header {
        display: {{ 'none' if is_state('input_boolean.hide_admin','on') else 'block' }};
      }
      {% else %}
      ha-dialog > ha-dialog-header { display: none; }
      {% endif %}

      ha-dialog {
        /* Center & fixed width */
        --vertical-align-dialog: center !important;
        --mdc-dialog-min-width: 90vw;
        --mdc-dialog-max-width: 90vw;
      }

    ha-more-info-info:
      $:
        ha-more-info-history:
          $: |
            /* Hide "Show more" header as per admin condition */
            {% if user == 'me' %}
            .header {
              display: {{ 'none !important' if is_state('input_boolean.hide_admin','on') else 'block' }};
            }
            {% else %}
            .header { display: none !important; }
            {% endif %}

Any suggestions appreciated!

[Mariusthvdb]

did you try the untemplated version of that first?

                        ha-dialog $ wa-dialog:
                          .: |
                            ha-dialog-header {
                              display: none;
                            }

if that works, build from that

[BoneheadFraggle]

did you try the untemplated version of that first?

Good to see you, I think most of the hacks I use, originates from you :-)

I had a look in F12 > Elements and tried a few variants, but found none that worked.
Which probably just means I did it wrong.

Using the old code in the example, where do I put it?

[Mariusthvdb]

tbh, Ive taken out most of these hide options out of uix, and moved to Kiosk-mode, or my own custom more-info.

but, if you need a very specific dynamic context, it would be fully possible in uix only I think (though Kiosk-mode also allows for templates that can be very specific.)

must check for myself ….

I still have this:

  uix-more-info-yaml: |
    ha-dialog-header: |
      {# adding this, because Kiosk-mode does not apply to /config dashboards #}
      .breadcrumb {
        {% if is_state('input_boolean.hide_dialog_header_breadcrumb_navigation','on') %}
        display: none !important
        {% endif %};
      }

but I see it doesnt work anymore in the /config views, for which I added that…..

[dcapslock]

more-info dialogs are now ha-adaptive-dialog which will then contain either ha-dialog or ha-bottom-sheet. Also more-info now slots the header components indepedently so ha-dialog-header is found differently depending on dialog or bottom sheets.

  uix-more-info-yaml: |
    "$": |
      ha-bottom-sheet slot:nth-of-type(1) ha-dialog-header
      {
        display: none;
      }
    "$ ha-dialog $": |
      wa-dialog slot:nth-of-type(1) ha-dialog-header {
        display: none;
      }

[BoneheadFraggle]

Like magic. Works perfectly. Thank you so much!

[dcapslock]

You will also need to tweak your center and fixed width so these to ha-dialog. more-info uses size "medium" which you can't influence but you can just override the medium width
.

  uix-more-info-yaml: |
    "$": |
      ha-bottom-sheet slot:nth-of-type(1) ha-dialog-header
      {
        display: none;
      }
      ha-dialog {
        --ha-dialog-width-md: 95vw;
        --dialog-surface-margin-top: auto;
      }

    "$ ha-dialog $": |
      wa-dialog slot:nth-of-type(1) ha-dialog-header {
        display: none;
      }

[BoneheadFraggle]

Even better. Really appreciated!

For reference, the code I ended up with, matching the original one in functionality and appearance is this:

  uix-more-info-yaml: |
   "$": |
     ha-bottom-sheet slot:nth-of-type(1) ha-dialog-header
     {
       {% if user == 'Me' %}
       display: {{ 'none !important' if is_state('input_boolean.hide_admin','on') }};
       {% else %}
       display: none;
       {% endif %}
     }

     ha-dialog {
       --dialog-surface-margin-top: auto;
     }


   "$ ha-dialog $": |
     wa-dialog slot:nth-of-type(1) ha-dialog-header {
       {% if user == 'Me' %}
       display: {{ 'none !important' if is_state('input_boolean.hide_admin','on') }};
       {% else %}
       display: none;
       {% endif %}
     }

   ha-more-info-info:
     $:
       ha-more-info-history:
         $: |
           /* Hide "Show more" header as per admin condition */
           {% if user == 'Me' %}
           .header {
             display: {{ 'none !important' if is_state('input_boolean.hide_admin','on') else 'block' }};
           }
           {% else %}
           .header { display: none !important; }
           {% endif %}

[Mariusthvdb]

now what about those .breadcrumbs….?