Increase target area in tile card and area card (#26017)

src/components/ha-control-button-group.ts

@@ -26,7 +26,6 @@ export class HaControlButtonGroup extends LitElement {
     .container {
       display: flex;
       flex-direction: row;
-      justify-content: var(--control-button-group-alignment, start);
       width: 100%;
       height: 100%;
     }

src/panels/lovelace/card-features/common/card-feature-styles.ts

@@ -25,9 +25,6 @@ export const cardFeatureStyles = css`
     flex-basis: 20px;
     --control-button-padding: 0px;
   }
-  ha-control-button-group[no-stretch] > ha-control-button {
-    max-width: 48px;
-  }
   ha-control-button {
     --control-button-focus-color: var(--feature-color);
   }

src/panels/lovelace/card-features/hui-area-controls-card-feature.ts

@@ -1,5 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
+import { classMap } from "lit/directives/class-map";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
@@ -229,7 +230,11 @@ class HuiAreaControlsCardFeature
     }
 
     return html`
-      <ha-control-button-group ?no-stretch=${this.position === "inline"}>
+      <ha-control-button-group
+        class=${classMap({
+          "no-stretch": this.position === "inline",
+        })}
+      >
         ${displayControls.map((control) => {
           const button = AREA_CONTROLS_BUTTONS[control];
 
@@ -292,8 +297,22 @@ class HuiAreaControlsCardFeature
     return [
       cardFeatureStyles,
       css`
+        :host {
+          pointer-events: none !important;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-end;
+        }
         ha-control-button-group {
-          --control-button-group-alignment: flex-end;
+          pointer-events: auto;
+          width: 100%;
+        }
+        ha-control-button-group.no-stretch {
+          width: auto;
+          max-width: 100%;
+        }
+        ha-control-button-group.no-stretch > ha-control-button {
+          width: 48px;
         }
         ha-control-button {
           --active-color: var(--state-active-color);

src/panels/lovelace/card-features/hui-card-feature.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../../types";
 import type { HuiErrorCard } from "../cards/hui-error-card";
@@ -56,6 +56,12 @@ export class HuiCardFeature extends LitElement {
     }
     return html`${element}`;
   }
+
+  static styles = css`
+    :host > * {
+      pointer-events: auto;
+    }
+  `;
 }
 
 declare global {

src/panels/lovelace/card-features/hui-card-features.ts

@@ -46,6 +46,7 @@ export class HuiCardFeatures extends LitElement {
       --feature-height: 42px;
       --feature-border-radius: 12px;
       --feature-button-spacing: 12px;
+      pointer-events: none;
       position: relative;
       width: 100%;
       display: flex;