fix(ui): use useId instead of crypto to create ids

Author: macarie

packages/ui/client/components/SmallTabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { provide, ref, useId } from 'vue'
 import { idFor, SMALL_TABS_CONTEXT } from '~/composables/small-tabs'
 
 const activeTab = ref<string | null>(null)
@@ -9,7 +9,7 @@ function setActive(key: string) {
   activeTab.value = key
 }
 
-const id = crypto.randomUUID()
+const id = useId()
 
 provide(SMALL_TABS_CONTEXT, {
   id,

packages/ui/client/components/VisualRegressionSlider.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TestArtifactAttachment } from '@vitest/runner'
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { internalOrExternalUrl } from '~/composables/attachments'
 import VisualRegressionImageContainer from './VisualRegressionImageContainer.vue'
 
@@ -21,7 +21,7 @@ const maxHeight = computed(() =>
 
 const splitPercentage = ref(50)
 
-const inputId = crypto.randomUUID()
+const inputId = useId()
 </script>
 
 <template>