Test with more info dialog (not intended final)

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -92,6 +92,7 @@ export interface MoreInfoDialogParams {
   large?: boolean;
   data?: Record<string, any>;
   parentElement?: LitElement;
+  anchor?: Element;
 }
 
 type View = "info" | "history" | "settings" | "related" | "add_to";
@@ -118,6 +119,8 @@ const DEFAULT_VIEW: View = "info";
 export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public dialogAnchor?: Element;
+
   @property({ type: Boolean, reflect: true }) public large = false;
 
   @state() private _fill = false;
@@ -169,6 +172,9 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     this._childView = undefined;
     this.large = params.large ?? false;
     this._fill = false;
+    if (params.anchor) {
+      this.dialogAnchor = params.anchor;
+    }
     this._open = true;
     this._loadEntityRegistryEntry();
   }
@@ -205,6 +211,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     this._currView = DEFAULT_VIEW;
     this._childView = undefined;
     this._isEscapeEnabled = true;
+    this.dialogAnchor = undefined;
     window.removeEventListener("dialog-closed", this._enableEscapeKeyClose);
     window.removeEventListener("show-dialog", this._disableEscapeKeyClose);
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -581,6 +588,10 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
         .hass=${this.hass}
         .open=${this._open}
         .width=${this._fill ? "full" : this.large ? "large" : "medium"}
+        desktop-mode=${this.dialogAnchor && !this.large && !this._fill
+          ? "popover"
+          : "dialog"}
+        .dialogAnchor=${this.dialogAnchor ?? null}
         @closed=${this._dialogClosed}
         @opened=${this._handleOpened}
         .preventScrimClose=${this._currView === "settings" ||

src/panels/lovelace/common/handle-action.ts

@@ -106,7 +106,7 @@ export const handleAction = async (
         config.camera_image ||
         config.image_entity;
       if (entityId) {
-        fireEvent(node, "hass-more-info", { entityId });
+        fireEvent(node, "hass-more-info", { entityId, anchor: node });
       } else {
         showToast(node, {
           message: hass.localize(

src/state/more-info-mixin.ts

@@ -44,7 +44,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         () => import("../dialogs/more-info/ha-more-info-dialog"),
         ev.detail.parentElement,
         true,
-        undefined
+        ev.detail.anchor
       );
     }
   };