PR fixes

src/app/components/VoiceCallAudioSettingsDialog.svelte

@@ -5,6 +5,7 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import {
     currentVoiceSession,
@@ -41,16 +42,9 @@
   }
 
   $effect(() => {
-    void loadDevices()
+    loadDevices()
-    const md = navigator.mediaDevices
+    navigator.mediaDevices?.addEventListener?.("devicechange", loadDevices)
-    if (!md?.addEventListener) return
+    return () => navigator.mediaDevices?.removeEventListener?.("devicechange", loadDevices)
-    const onDeviceChange = () => {
-      void loadDevices()
-    }
-    md.addEventListener("devicechange", onDeviceChange)
-    return () => {
-      md.removeEventListener("devicechange", onDeviceChange)
-    }
   })
 
   $effect(() => {
@@ -83,8 +77,8 @@
   <ModalBody>
     <ModalHeader>
       <ModalTitle>Audio settings</ModalTitle>
+      <ModalSubtitle>Choose microphone and speaker for this call.</ModalSubtitle>
     </ModalHeader>
-    <p class="text-sm opacity-80">Choose microphone and speaker for this call.</p>
     <div class="flex flex-col gap-4 pt-2">
       <FieldInline>
         {#snippet label()}
@@ -129,6 +123,6 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-primary" onclick={onDone}>Done</Button>
+    <Button class="btn btn-primary w-full" onclick={onDone}>Done</Button>
   </ModalFooter>
 </Modal>