Motivation:
The previous toggle switch animation was abrupt and rigid. The clickable area also spanned the entire row width, which led to unintentional clicks.
Implementation:
- CSS: Replaced static transitions with cubic-bezier spring physics, hardware-accelerated transforms (translate), and pressed-state squish feedback.
- JS: Wrapped the switch in a constrained flex container, replacing the full-width <label> wrapper to fix the clickable area.