From acd6adfcfdfec1f05f721ebd921b6279bcbf53b1 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 27 Dec 2025 18:29:31 +0100
Subject: [PATCH] fix: toggle switch animation using inline styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use inline transform styles instead of Tailwind classes to ensure
the toggle thumb animates properly regardless of compiled CSS.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/templates/shared/macros/inputs.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/templates/shared/macros/inputs.html b/app/templates/shared/macros/inputs.html
index b0c4c79d..6101d8c1 100644
--- a/app/templates/shared/macros/inputs.html
+++ b/app/templates/shared/macros/inputs.html
@@ -311,9 +311,9 @@
     color='indigo'
 ) %}
 {% set sizes = {
-    'sm': {'track': 'w-10 h-5', 'thumb': 'w-4 h-4', 'translate': 'translate-x-5', 'text': 'text-sm'},
-    'md': {'track': 'w-14 h-7', 'thumb': 'w-5 h-5', 'translate': 'translate-x-7', 'text': 'text-base'},
-    'lg': {'track': 'w-16 h-8', 'thumb': 'w-6 h-6', 'translate': 'translate-x-8', 'text': 'text-lg'}
+    'sm': {'track': 'w-10 h-5', 'thumb': 'w-4 h-4', 'offset': '1.25rem', 'text': 'text-sm'},
+    'md': {'track': 'w-14 h-7', 'thumb': 'w-5 h-5', 'offset': '1.75rem', 'text': 'text-base'},
+    'lg': {'track': 'w-16 h-8', 'thumb': 'w-6 h-6', 'offset': '2rem', 'text': 'text-lg'}
 } %}
 {% set s = sizes[size] %}
 <div class="inline-flex items-center gap-3">
@@ -328,8 +328,8 @@
             :aria-checked="{{ model }}"
             class="{{ s.track }} relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-{{ color }}-500 focus:ring-offset-2"
             :class="{{ model }} ? 'bg-{{ color }}-600' : 'bg-gray-300 dark:bg-gray-600'">
-        <span class="{{ s.thumb }} absolute left-0.5 bg-white rounded-full shadow-md transition-transform"
-              :class="{{ model }} ? '{{ s.translate }}' : 'translate-x-0'"></span>
+        <span class="{{ s.thumb }} absolute bg-white rounded-full shadow-md transition-transform duration-200"
+              :style="{{ model }} ? 'transform: translateX({{ s.offset }})' : 'transform: translateX(0.125rem)'"></span>
     </button>
 
     {% if right_label %}