Prevent default on toggle_button click events

Fixes bug where, if toggle-icon is clicked,
the toggle does not change value

app/assets/javascripts/vue_shared/components/toggle_button.vue

@@ -73,7 +73,7 @@ export default {
         'is-disabled': disabledInput,
         'is-loading': isLoading,
       }"
-      @click="toggleFeature"
+      @click.prevent="toggleFeature"
     >
       <gl-loading-icon class="loading-icon" />
       <span class="toggle-icon">

app/assets/stylesheets/framework/toggle.scss

@@ -55,6 +55,7 @@
     transition: all 0.2s ease;
     width: $default-icon-size;
     height: $default-icon-size;
+    // pointer-events: none;
   }
 
   .loading-icon {

changelogs/unreleased/fix-toggle_button-vue.yml

+---
+title: Improve click surface area of toggle buttons
+merge_request: 40231
+author:
+type: changed