Scroll issue on popups

[matrixx567]

Describe the bug A full screen popup has a white border and it enables scrolling by some pixels. The white border is shown on all internal popups.

Expected behavior There shouldn't be a white border and the popup shouldn't be scrollable.

Screenshots

Additional context Could the problem be in the implementation of the internal UI-Minimalist popups or is there a problem in the underlying library lovelace-card-tools by @thomasloven that is used by the browser_mod.

[AndyVRD]

I already fixed this, will commit the changes to a pr today.

[schumijo]

@matrixx567 @AndyVRD On which device and app/browser do you see this problem ? I don't see any white border on Android Home Assistant app.

[matrixx567]

@schumijo

More or less I see it on all popups on all devices, on my Android Home Assistant app and also in the Chrome browser on my notebook.

The light popup on my Android has the white border but it doesn't scroll. The power_outlet popup has both, he white border and also the scrolling.

[schumijo]

@matrixx567 Ok interesting 🤔 Maybe it depends on height resolution. Let see @AndyVRD fix

[AndyVRD]

I had this behavior on iOS and Chrome so it was not related to a specific resolution or OS. The strange thing about it was it's not always showing and had to multiple refresh to got the "glitch". I fixed it by applying the below style to all the browser_mod parts of the popup's. @schumijo, if you see more complains about it feel free to add this fix to the popup's.

	.: |
	  :host {
              --mdc-theme-surface: var(--primary-background-color);
              --secondary-background-color: var(--primary-background-color);
              --ha-card-background: var(--primary-background-color);
	  }
	  mwc-icon-button {
		color: rgba(0,0,0,0);
	$: |
	  .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
		border-radius: 0px;
	  }
	  *{
		--secondary-background-color: none;
	  }

[matrixx567]

@AndyVRD

I've tested your code in the styles section of the power_outlet_stats popup but it doesn't fix the problem.

I think the white border has more to do with the padding of the following section

.mdc-dialog .mdc-dialog__content {
    position: var(--dialog-content-position, relative);
    padding: var(--dialog-content-padding, 24px);
}

The variable --dialog-content-padding isn't set in my case.

[AndyVRD]

@matrixx567 I have not tested it with all the popups but it works fine for the light card and media player card. Anyway you need to apply this to all the browser_mod related items for that popup using card_mod. Just adding it to styles will not work. Btw, I don’t see that code you posted anywhere in that popup?

[matrixx567]

@AndyVRD This code is from the Chrome Dev Tools.

[matrixx567]

Hi @AndyVRD @schumijo,

If I add following style to the browser_mod style of an action than it will remove the white border and the scrollbar

      style:
        $: |
          :host .mdc-dialog .mdc-dialog__container .mdc-dialog__surface .mdc-dialog__content {
            padding: 20px 24px;
          }

[AndyVRD]

Yes and this will also remove the border-radius.

                    $: |
                      :host .mdc-dialog .mdc-dialog__container .mdc-dialog__surface .mdc-dialog__content {
                        padding: 20px 24px;
                      }
                      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
                        border-radius: 0px;
                      }```

[schumijo]

Hi @AndyVRD @matrixx567 I am in holidays and I can't do any tests before next week.

[matrixx567]

Hi @AndyVRD @schumijo

An improved version for removing the border radius only on small devices if the popup is set to full screen

      style:
        $: |
          :host .mdc-dialog .mdc-dialog__container .mdc-dialog__surface .mdc-dialog__content {
            padding: 20px 24px;
          }
          @media (max-width: 450px), (max-height: 500px) {
            .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
              border-radius: 0px;
            }
          }
        .: |
          @media (max-width: 450px), (max-height: 500px) {
            ha-dialog {
              --ha-card-border-radius: 0px;
            }
          }
          :host {
            --mdc-theme-surface: var(--primary-background-color);
          }