Alignment to original HA popup. #1098

dobby5 · 2025-11-09T10:16:55Z

Fixed the bug that left a margin on the left and right sides. (Mobile view)
Fixed the responsive behavior.
Now the distance between the popup and the browser window is calculated and transferred to the mobile view.
Fixed scrolling
The background no longer scrolls when you continue scrolling at the end or beginning of the popup.
Minor design adjustments

… view) Fixed the responsive behavior. Now the distance between the popup and the browser window is calculated and transferred to the mobile view. Fixed scrolling The background no longer scrolls when you continue scrolling at the end or beginning of the popup. Minor design adjustments

dobby5 · 2025-11-11T09:25:38Z

Hey @thomasloven, would you give me some feedback? I've implemented some of your requests.

dcapslock · 2025-11-11T09:27:02Z

Hi @dobby5, you responded to my requests. Busy this week and I should be able to look at later in the week.

dcapslock

Thank you again for refining the PR to this stage. However there is still is so much irrelevant changes in this PR that it is impossible to review. Comments left so far are to do with all the irrelevant changes and in some cases where a bug is introduced. I am fearful there are more bugs introduced that I cannot see.

Also, I see that you are abstracting the concept of dialog width from styles. This is not the approach needed. Diaolog width is part of styles. If the PR was focussed just on this part I might be able to give relevant feedback. However as to all the irrelevant changes, it is hard to pick out what is specifically regarding the dialog sizing.

I have stopped reviewing at this stage. Please confine this PR to the exact elements required to address the dialog alignment. Thank you.

dcapslock · 2025-11-15T22:26:16Z

js/plugin/popup-card.ts

      ev.preventDefault();
      let properties = { ...cardConfig }
      delete properties.card;
+      window.browser_mod?.service("popup", {


This is reverting a recent fix. Please update your branch.

dcapslock · 2025-11-15T22:34:09Z

js/plugin/dashboard-cards/tile-card.ts

 import { BrowserModTileCardEditor } from "./tile-card-editor";
 import structuredClone from "@ungap/structured-clone";
 import { getLovelaceRoot } from "../../helpers";
+import { LovelaceGridOptions, LovelaceCard } from "../../types/types";


No need to move types.

Not necessary, but it would be nice, because it would mean that the project would at least follow the structural standards to some respects.

dcapslock · 2025-11-15T22:35:57Z

js/plugin/popups.ts


 export function setCustomElementClass(dialogTag: string): void {
-  if (customElementClassCache[dialogTag]) {
+  // Check if already registered in customElements registry (not just cache)


All these changes for custom class are unneccessary. If they are to fix any issue (unlikely) then please submit as separate PR.

dcapslock · 2025-11-15T22:37:07Z

tsconfig.json

    "experimentalDecorators": true
-  }
-}
+  },


Changes only needed as you moved types. Leave types as is, or if critical to move, subit a separate PR moving types and updating build CI files.

dcapslock · 2025-11-15T22:38:31Z

js/plugin/types.d.ts

+
+export interface HaButtonElement extends HTMLElement, HaButtonProps { }
+
+export type DialogWidth = "small" | "medium" | "large" | "full";


I am yet to look at this in detail, but a DialogWidth goes against the concept that the width of the dialog is part of the style. Please make sure you understand the relationship of dialog width being part of style and not an isolated feature.

I think we are talking at cross-purposes, or perhaps expectations have changed over time. If that is the case, please let me know.

You originally wanted to adopt ha-wa-dialoge. If you take a look at the code, you will see that those types are integrated.
I have no idea what you will do with the types in the future, and I don't care.

Currently, it is used to calculate the dialog size. Until ha-wa-dialoge is used for the dashboard, this will remain a workaround.

dcapslock · 2025-11-15T22:48:56Z

js/plugin/popup-dialog.ts

+        flex: 1;
      }
+
      :host([card]) .content .container {


As you have changed card from a refectled property to _card, this syle will never be applied. So a bug introduced here due to the irrelevant changes you are applying without full understanding of their consequences.

Paste mistake. Thank you.

dcapslock · 2025-11-15T22:50:09Z

js/plugin/popup-dialog.ts

+  @state() _popupStyles: PopupStyle[] = [];
+  @state() _formdata: any;
+  @state() _formDataValid: boolean = true;
+  @state() _card: boolean = false;


Change from card to _card has styling consequences. Another irrelevant changes, and in this case I can immediately see it will introduced a bug.

This is not irrelevant when working with standardization. Often, the difference between state, property, private, and public was not recognized or understood, but this is being fixed here.

A little tip in this regard: The Home Assistant frontend code is very nicely structured and invites you to learn from it.

It would be helpful if you could tell me which bug you are seeing so that it can be fixed.

dcapslock · 2025-11-15T22:51:42Z

js/plugin/popup-dialog.ts

+  @property({ type: String }) width: DialogWidth = "medium";
+  @property({ type: Boolean }) preventScrimClose: boolean = false;
+  @property({ type: String }) headerTitle: string = "";
+  @property({ type: String }) headerSubtitle: string = "";


Where is headerSubtitle and headerSubtitlePosition used?

See above: Preparation for adoption ha-wa-dialog

dcapslock · 2025-11-15T22:55:06Z

js/plugin/popup-dialog.ts

+      card.addEventListener("ll-rebuild", () => {
        this._build_card(config);
      });
+    } catch (error) {


No. This is not required. The error is caught by Frontend which will display error title and details in preview mode, and 'Configuration error' otherwise.

dcapslock · 2025-11-15T22:55:47Z

js/plugin/popup-dialog.ts

        }
+      });
+    }
+    if (changedProperties.has("_narrow")) {


Just make 'narrow` refelected attribute.

No Idea what you mean exactly but maybe this...

thomasloven#1098

dcapslock · 2025-11-19T12:42:32Z

@dobby5 will review later this week or over the weekend when time permits.

dobby5 · 2025-11-25T12:36:34Z

@dobby5 will review later this week or over the weekend when time permits.

Do you have any Feedback for me?

dcapslock reviewed Nov 15, 2025

View reviewed changes

Reflecting change requests

ea3fdcb

thomasloven#1098


		export interface HaButtonElement extends HTMLElement, HaButtonProps { }

		export type DialogWidth = "small" \| "medium" \| "large" \| "full";

Alignment to original HA popup. #1098

Are you sure you want to change the base?

Alignment to original HA popup. #1098

Uh oh!

Conversation

dobby5 commented Nov 9, 2025

Uh oh!

dobby5 commented Nov 11, 2025

Uh oh!

dcapslock commented Nov 11, 2025

Uh oh!

dcapslock left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dcapslock Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dcapslock commented Nov 19, 2025

Uh oh!

dobby5 commented Nov 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dcapslock Nov 15, 2025 •

edited

Loading