Problem with overflow for dialog tooltips

[beauwest]

Hey! Tooltips for the entity detail dialogs are cut off instead of overflowing their container.

Behavior

Expected

[Madelena]

Hmmmmmm I'm stumped on this one. After commenting out a bunch of codes to trace the bug, I've come to the conclusion that CSS backdrop-filter and filter breaks how it handles overflow of a block.

I did manage to fix it by disabling the overflow-y property of .mdc-dialog__surface and .content. But the problem is that sometimes cards do overflow (e.g. when it has a lot of attributes) so I can't fix it this way...

If anyone had experience fixing this one, please let me know!

[beauwest]

I'm looking into it too, it has something to do with the .mdc-dialog__surface::before, but I can't figure out the differences yet. The position: absolute and width/height: 100% is supposed to be based on the entire page, but right now it's based on the dialog element.

I have to get to work, but if I have time, I'll dig into it more.

[Madelena]

The solution here will temporarily fix the scrollbar problem, but you lose the transparency blur in the process:

#7

[zanix]

I stumbled on a partial solution, it fixes overflow for tooltips while retaining the blur effect

  card-mod-more-info-yaml: &card-mod-more-info-yaml |
    $: |
      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .mdc-dialog__surface {
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
        }
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        overflow: visible;
      }
      .mdc-dialog__surface {
        box-shadow: 0 0px 16px 4px rgba(var(--dialog-box-shadow), .15), 0 16px 64px 32px rgba(var(--dialog-box-shadow), .5) !important;
      }

However, dropdowns render incorrectly but it makes them more usable than before as noted in #28

I am no CSS expert, but if I remove the top and left style properties from this element, it returns to the proper position. I'm not sure how to apply this fix to the CSS though.

[Madelena]

Cool! Thank you and let me try this fix out.

[zanix]

Dropdowns seem to have been almost fixed with Home Assistant v2022.9.0 when using the overflow fix

Without the overflow fix, dropdowns cause scrollbars to show, but still show (almost) in the correct location

And the tooltips causing scrollbars still occur without the overflow fix

[Madelena]

It's probably not an issue anymore since HA 2022.10 changed all the dialogs.

[zanix]

The overflow issue is still present for me on HA 2022.12
Nevermind, the fix is in v1.8

[zanix]

Ah, I see my fix was added to v1.8

[mmalolepszy]

I had an issue with overflows and after manually applying a fix from @zanix it now looks like this:

What can I do about it?

I'm on HA 2022.12.9 and Metrology 1.7.2 installed via HACS.