From e0b32ea78908df497d52914e34745f779b27715a Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 1 Jul 2025 14:34:19 +0200
Subject: [PATCH] Increase target area in tile card and area card (#26017)

---
 src/components/ha-control-button-group.ts     |  1 -
 .../common/card-feature-styles.ts             |  3 ---
 .../hui-area-controls-card-feature.ts         | 23 +++++++++++++++++--
 .../card-features/hui-card-feature.ts         |  8 ++++++-
 .../card-features/hui-card-features.ts        |  1 +
 5 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/ha-control-button-group.ts b/src/components/ha-control-button-group.ts
index fa9d0717c1..5c59d0801f 100644
--- a/src/components/ha-control-button-group.ts
+++ b/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%;
     }
diff --git a/src/panels/lovelace/card-features/common/card-feature-styles.ts b/src/panels/lovelace/card-features/common/card-feature-styles.ts
index 15a6cebcd1..799570cc99 100644
--- a/src/panels/lovelace/card-features/common/card-feature-styles.ts
+++ b/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);
   }
diff --git a/src/panels/lovelace/card-features/hui-area-controls-card-feature.ts b/src/panels/lovelace/card-features/hui-area-controls-card-feature.ts
index 441684a477..705f02855a 100644
--- a/src/panels/lovelace/card-features/hui-area-controls-card-feature.ts
+++ b/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);
diff --git a/src/panels/lovelace/card-features/hui-card-feature.ts b/src/panels/lovelace/card-features/hui-card-feature.ts
index fa92cc89ae..9dae99634c 100644
--- a/src/panels/lovelace/card-features/hui-card-feature.ts
+++ b/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 {
diff --git a/src/panels/lovelace/card-features/hui-card-features.ts b/src/panels/lovelace/card-features/hui-card-features.ts
index 138e639657..21227fe0fa 100644
--- a/src/panels/lovelace/card-features/hui-card-features.ts
+++ b/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;