From e68b4c75aca758f0040c9059d2b6b4709494fa46 Mon Sep 17 00:00:00 2001
From: Tobias Messner <tobias@zusor.io>
Date: Mon, 15 Dec 2025 17:58:42 +0100
Subject: [PATCH] fix(ui): Prevent zoom when double-tapping price-based
 charging buttons in Koala theme

Users will often quickly press the buttons to increase/decrease the price-based charging amount multiple times.
On touch-based devices, this will zoom in on the button, which is very annoying.
By setting `touch-action: manipulation` on the relevant buttons, this is prevented.
---
 .../src/components/ChargePointEcoSettings.vue  | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
index 4bdc794e23..24e026095c 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
@@ -76,7 +76,7 @@
       <div class="col-auto">
         <q-btn
           v-if="maxPrice.value"
-          class="col-auto q-mr-xs"
+          class="col-auto q-mr-xs disable-zoom"
           label="-1,00"
           color="grey"
           size="sm"
@@ -85,7 +85,7 @@
         />
         <q-btn
           v-if="maxPrice.value"
-          class="col-auto q-mr-xs"
+          class="col-auto q-mr-xs disable-zoom"
           label="-0,10"
           color="grey"
           size="sm"
@@ -94,7 +94,7 @@
         />
         <q-btn
           v-if="maxPrice.value"
-          class="col-auto"
+          class="col-auto disable-zoom"
           label="-0,01"
           color="grey"
           size="sm"
@@ -113,7 +113,7 @@
       <div class="col-auto">
         <q-btn
           v-if="maxPrice.value"
-          class="col-auto q-mr-xs"
+          class="col-auto q-mr-xs disable-zoom"
           label="+0,01"
           color="grey"
           size="sm"
@@ -122,7 +122,7 @@
         />
         <q-btn
           v-if="maxPrice.value"
-          class="col-auto q-mr-xs"
+          class="col-auto q-mr-xs disable-zoom"
           label="+0,10"
           color="grey"
           size="sm"
@@ -131,7 +131,7 @@
         />
         <q-btn
           v-if="maxPrice.value"
-          class="col-auto"
+          class="col-auto disable-zoom"
           label="+1,00"
           color="grey"
           size="sm"
@@ -217,3 +217,9 @@ const maxPrice = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeMaxPrice(props.chargePointId),
 );
 </script>
+
+<style scoped>
+.disable-zoom {
+  touch-action: manipulation;
+}
+</style>