Fix tile card interaction when border width is set to 0

home-assistant · Dec 7, 2023 · e0a96f8 · e0a96f8
1 parent 76d3c6e
commit e0a96f8
Showing 1 changed file with 76 additions and 79 deletions.
diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -310,24 +310,22 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     if (!stateObj) {
       return html`
         <ha-card>
-          <div class="tile">
-            <div class="content ${classMap(contentClasses)}">
-              <div class="icon-container">
-                <ha-tile-icon class="icon" .iconPath=${mdiHelp}></ha-tile-icon>
-                <ha-tile-badge
-                  class="badge"
-                  .iconPath=${mdiExclamationThick}
-                  style=${styleMap({
-                    "--tile-badge-background-color": `var(--red-color)`,
-                  })}
-                ></ha-tile-badge>
-              </div>
-              <ha-tile-info
-                class="info"
-                .primary=${entityId}
-                secondary=${this.hass.localize("ui.card.tile.not_found")}
-              ></ha-tile-info>
+          <div class="content ${classMap(contentClasses)}">
+            <div class="icon-container">
+              <ha-tile-icon class="icon" .iconPath=${mdiHelp}></ha-tile-icon>
+              <ha-tile-badge
+                class="badge"
+                .iconPath=${mdiExclamationThick}
+                style=${styleMap({
+                  "--tile-badge-background-color": `var(--red-color)`,
+                })}
+              ></ha-tile-badge>
             </div>
+            <ha-tile-info
+              class="info"
+              .primary=${entityId}
+              secondary=${this.hass.localize("ui.card.tile.not_found")}
+            ></ha-tile-info>
           </div>
         </ha-card>
       `;
@@ -359,73 +357,71 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
 
     return html`
       <ha-card style=${styleMap(style)} class=${classMap({ active })}>
-        <div class="tile">
+        <div
+          class="background"
+          @action=${this._handleAction}
+          .actionHandler=${actionHandler({
+            hasHold: hasAction(this._config!.hold_action),
+            hasDoubleClick: hasAction(this._config!.double_tap_action),
+          })}
+          role="button"
+          tabindex="0"
+          aria-labelledby="info"
+          @mousedown=${this.handleRippleActivate}
+          @mouseup=${this.handleRippleDeactivate}
+          @mouseenter=${this.handleRippleMouseEnter}
+          @mouseleave=${this.handleRippleMouseLeave}
+          @touchstart=${this.handleRippleActivate}
+          @touchend=${this.handleRippleDeactivate}
+          @touchcancel=${this.handleRippleDeactivate}
+        >
+          ${this._shouldRenderRipple
+            ? html`<mwc-ripple></mwc-ripple>`
+            : nothing}
+        </div>
+        <div class="content ${classMap(contentClasses)}">
           <div
-            class="background"
-            @action=${this._handleAction}
-            .actionHandler=${actionHandler({
-              hasHold: hasAction(this._config!.hold_action),
-              hasDoubleClick: hasAction(this._config!.double_tap_action),
-            })}
+            class="icon-container"
             role="button"
             tabindex="0"
-            aria-labelledby="info"
-            @mousedown=${this.handleRippleActivate}
-            @mouseup=${this.handleRippleDeactivate}
-            @mouseenter=${this.handleRippleMouseEnter}
-            @mouseleave=${this.handleRippleMouseLeave}
-            @touchstart=${this.handleRippleActivate}
-            @touchend=${this.handleRippleDeactivate}
-            @touchcancel=${this.handleRippleDeactivate}
+            @action=${this._handleIconAction}
+            .actionHandler=${actionHandler()}
           >
-            ${this._shouldRenderRipple
-              ? html`<mwc-ripple></mwc-ripple>`
+            ${imageUrl
+              ? html`
+                  <ha-tile-image
+                    class="icon"
+                    .imageUrl=${imageUrl}
+                  ></ha-tile-image>
+                `
+              : html`
+                  <ha-tile-icon
+                    data-domain=${ifDefined(domain)}
+                    data-state=${ifDefined(stateObj?.state)}
+                    class="icon"
+                    .icon=${icon}
+                    .iconPath=${iconPath}
+                  ></ha-tile-icon>
+                `}
+            ${badge
+              ? html`
+                  <ha-tile-badge
+                    class="badge"
+                    .icon=${badge.icon}
+                    .iconPath=${badge.iconPath}
+                    style=${styleMap({
+                      "--tile-badge-background-color": badge.color,
+                    })}
+                  ></ha-tile-badge>
+                `
               : nothing}
           </div>
-          <div class="content ${classMap(contentClasses)}">
-            <div
-              class="icon-container"
-              role="button"
-              tabindex="0"
-              @action=${this._handleIconAction}
-              .actionHandler=${actionHandler()}
-            >
-              ${imageUrl
-                ? html`
-                    <ha-tile-image
-                      class="icon"
-                      .imageUrl=${imageUrl}
-                    ></ha-tile-image>
-                  `
-                : html`
-                    <ha-tile-icon
-                      data-domain=${ifDefined(domain)}
-                      data-state=${ifDefined(stateObj?.state)}
-                      class="icon"
-                      .icon=${icon}
-                      .iconPath=${iconPath}
-                    ></ha-tile-icon>
-                  `}
-              ${badge
-                ? html`
-                    <ha-tile-badge
-                      class="badge"
-                      .icon=${badge.icon}
-                      .iconPath=${badge.iconPath}
-                      style=${styleMap({
-                        "--tile-badge-background-color": badge.color,
-                      })}
-                    ></ha-tile-badge>
-                  `
-                : nothing}
-            </div>
-            <ha-tile-info
-              id="info"
-              class="info"
-              .primary=${name}
-              .secondary=${localizedState}
-            ></ha-tile-info>
-          </div>
+          <ha-tile-info
+            id="info"
+            class="info"
+            .primary=${name}
+            .secondary=${localizedState}
+          ></ha-tile-info>
         </div>
         <hui-card-features
           .hass=${this.hass}
@@ -442,6 +438,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       :host {
         --tile-color: var(--state-inactive-color);
         -webkit-tap-highlight-color: transparent;
+        --ha-card-border-width: 2px;
       }
       ha-card:has(.background:focus-visible) {
         --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
@@ -472,7 +469,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         bottom: 0;
         right: 0;
         border-radius: var(--ha-card-border-radius, 12px);
-        inset: calc(-1 * var(--ha-card-border-width, 1px));
+        margin: calc(-1 * var(--ha-card-border-width, 1px));
         overflow: hidden;
       }
       .content {