feat: Make the text for the value control a clickable label (#8334)

## Summary

More clickable!

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8334-feat-Make-the-text-for-the-value-control-a-clickable-label-2f56d73d365081e79886eddeec03458e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>

src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import RadioButton from 'primevue/radiobutton'
+import Button from '@/components/ui/button/Button.vue'
 import { computed } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -64,12 +65,16 @@ const controlMode = defineModel<ControlOptions>()
     </div>
 
     <div class="space-y-2">
-      <div
+      <Button
         v-for="option in controlOptions"
         :key="option.mode"
-        class="flex items-center justify-between py-2 gap-7"
+        as="label"
+        variant="textonly"
+        size="lg"
+        class="flex w-full h-[unset] text-left items-center justify-between py-2 gap-7"
+        :for="option.mode"
       >
-        <div class="flex items-center gap-2 flex-1 min-w-0">
+        <div class="flex items-center gap-2 flex-1 min-w-0 text-wrap">
           <div
             class="flex items-center justify-center w-8 h-8 rounded-lg flex-shrink-0 bg-secondary-background border border-border-subtle"
           >
@@ -102,11 +107,11 @@ const controlMode = defineModel<ControlOptions>()
 
         <RadioButton
           v-model="controlMode"
-          class="flex-shrink-0"
+          class="shrink"
           :input-id="option.mode"
           :value="option.mode"
         />
-      </div>
+      </Button>
     </div>
   </div>
 </template>