Reduce circular slider sensitivity when used in card (#18908)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

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 {

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 {

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 {

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;