Handle edit mode for panel mode cards better (#8687)

src/panels/lovelace/cards/hui-iframe-card.ts

@@ -31,9 +31,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
   @property({ type: Boolean, reflect: true })
   public isPanel = false;
 
-  @property({ type: Boolean, reflect: true })
-  public editMode = false;
-
   @property() protected _config?: IframeCardConfig;
 
   public getCardSize(): number {
@@ -94,10 +91,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
         height: 100%;
       }
 
-      :host([ispanel][editMode]) ha-card {
-        height: calc(100% - 51px);
-      }
-
       ha-card {
         overflow: hidden;
       }

src/panels/lovelace/cards/hui-map-card.ts

@@ -72,9 +72,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
   @property({ type: Boolean, reflect: true })
   public isPanel = false;
 
-  @property({ type: Boolean, reflect: true })
-  public editMode = false;
-
   @property()
   private _history?: HassEntity[][];
 
@@ -658,10 +655,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
-      :host([ispanel][editMode]) ha-card {
-        height: calc(100% - 51px);
-      }
-
       ha-card {
         overflow: hidden;
         width: 100%;

src/panels/lovelace/components/hui-card-options.ts

@@ -10,6 +10,7 @@ import {
   html,
   LitElement,
   property,
+  PropertyValues,
   queryAssignedNodes,
   TemplateResult,
 } from "lit-element";
@@ -39,9 +40,19 @@ export class HuiCardOptions extends LitElement {
     return this._assignedNodes ? computeCardSize(this._assignedNodes[0]) : 1;
   }
 
+  protected updated(changedProps: PropertyValues) {
+    if (!changedProps.has("path") || !this.path) {
+      return;
+    }
+    this.classList.toggle(
+      "panel",
+      this.lovelace!.config.views[this.path![0]].panel
+    );
+  }
+
   protected render(): TemplateResult {
     return html`
-      <slot></slot>
+      <div class="card"><slot></slot></div>
       <ha-card>
         <div class="card-actions">
           <mwc-button @click=${this._editCard}
@@ -108,10 +119,14 @@ export class HuiCardOptions extends LitElement {
         outline: 2px solid var(--primary-color);
       }
 
-      ::slotted(*) {
+      :host:not(.panel) ::slotted(*) {
         display: block;
       }
 
+      :host(.panel) .card {
+        height: calc(100% - 59px);
+      }
+
       ha-card {
         border-top-right-radius: 0;
         border-top-left-radius: 0;