From de83ad7a7adacc08f3c6fb7e48acdeb60497e45d Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 5 Dec 2023 18:06:29 +0100
Subject: [PATCH] Reduce circular slider sensitivity when used in card (#18908)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/components/ha-control-circular-slider.ts             | 5 ++++-
 src/panels/lovelace/cards/hui-humidifier-card.ts         | 1 +
 src/panels/lovelace/cards/hui-thermostat-card.ts         | 1 +
 src/state-control/state-control-circular-slider-style.ts | 4 ++++
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/ha-control-circular-slider.ts b/src/components/ha-control-circular-slider.ts
index d6e72e838f..759e726197 100644
--- a/src/components/ha-control-circular-slider.ts
+++ b/src/components/ha-control-circular-slider.ts
@@ -618,6 +618,7 @@ export class HaControlCircularSlider extends LitElement {
         --control-circular-slider-high-color: var(
           --control-circular-slider-color
         );
+        --control-circular-slider-interaction-margin: 12px;
         width: 320px;
         display: block;
       }
@@ -633,7 +634,9 @@ export class HaControlCircularSlider extends LitElement {
         fill: none;
         stroke: transparent;
         stroke-linecap: round;
-        stroke-width: 48px;
+        stroke-width: calc(
+          24px + 2 * var(--control-circular-slider-interaction-margin)
+        );
         cursor: pointer;
       }
       #display {
diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts
index ef69c0e49d..54264b7908 100644
--- a/src/panels/lovelace/cards/hui-humidifier-card.ts
+++ b/src/panels/lovelace/cards/hui-humidifier-card.ts
@@ -180,6 +180,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
         max-width: 344px; /* 12px + 12px + 320px */
         padding: 0 12px 12px 12px;
         box-sizing: border-box;
+        --interaction-margin: 0px;
       }
 
       .more-info {
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 5779189795..d85613948c 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -172,6 +172,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         max-width: 344px; /* 12px + 12px + 320px */
         padding: 0 12px 12px 12px;
         box-sizing: border-box;
+        --interaction-margin: 0px;
       }
 
       .more-info {
diff --git a/src/state-control/state-control-circular-slider-style.ts b/src/state-control/state-control-circular-slider-style.ts
index 8928960380..c84475f51c 100644
--- a/src/state-control/state-control-circular-slider-style.ts
+++ b/src/state-control/state-control-circular-slider-style.ts
@@ -121,6 +121,10 @@ export const stateControlCircularSliderStyle = css`
   ha-control-circular-slider {
     width: 100%;
     --control-circular-slider-color: var(--state-color, var(--disabled-color));
+    --control-circular-slider-interaction-margin: var(
+      --interaction-margin,
+      12px
+    );
   }
   ha-control-circular-slider::after {
     display: block;