diff --git a/src/settings/SettingsCommands.vue b/src/settings/SettingsCommands.vue
index cb52939..b92f9cd 100644
--- a/src/settings/SettingsCommands.vue
+++ b/src/settings/SettingsCommands.vue
@@ -40,22 +40,22 @@
 
 <script setup lang="ts">
 
-import { v4 as uuidv4 } from 'uuid'
-import { ref, computed } from 'vue'
+import { Command } from 'types'
+import { Ref, ref, computed } from 'vue'
 import { store } from '../services/store'
+import { v4 as uuidv4 } from 'uuid'
 import { newCommand, saveCommands } from '../services/commands'
 import CommandDefaults from '../screens/CommandDefaults.vue'
 import CommandEditor from '../screens/CommandEditor.vue'
 import ContextMenu from '../components/ContextMenu.vue'
 import Dialog from '../composables/dialog'
-import { Command, Expert } from 'types'
 
-const commands = ref(null)
-const selected = ref(null)
-const edited = ref(null)
-const defaults = ref(null)
+const commands: Ref<Command[]> = ref(null)
+const selected: Ref<Command> = ref(null)
+const edited: Ref<Command> = ref(null)
+const defaults: Ref<typeof CommandDefaults> = ref(null)
 
-const moreButton = ref(null)
+const moreButton: Ref<HTMLElement> = ref(null)
 const showMenu = ref(false)
 const menuX = ref(0)
 const menuY = ref(0)
@@ -125,7 +125,7 @@ const onMore = () => {
 const showContextMenu = () => {
   showMenu.value = true
   const rcButton = moreButton.value.getBoundingClientRect()
-  const rcDialog = document.getElementsByTagName('dialog')[0].getBoundingClientRect()
+  const rcDialog = moreButton.value.closest('dialog').getBoundingClientRect()
   menuX.value = rcDialog.right - rcButton.right
   menuY.value = rcDialog.bottom - rcButton.bottom + rcButton.height + 8
 }
@@ -141,10 +141,10 @@ const handleActionClick = async (action: string) => {
 
   // process
   if (action === 'select') {
-    commands.value.forEach((expert: Expert) => expert.state = 'enabled')
+    commands.value.forEach((command: Command) => command.state = 'enabled')
     save()
   } else if (action === 'unselect') {
-    commands.value.forEach((expert: Expert) => expert.state = 'disabled')
+    commands.value.forEach((command: Command) => command.state = 'disabled')
     save()
   } else if (action === 'defaults') {
     onDefaults()
diff --git a/src/settings/SettingsExperts.vue b/src/settings/SettingsExperts.vue
index e42952c..74d6e85 100644
--- a/src/settings/SettingsExperts.vue
+++ b/src/settings/SettingsExperts.vue
@@ -38,20 +38,20 @@
 
 <script setup lang="ts">
 
+import { Expert } from 'types/index'
 import { Ref, ref, computed } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import { store } from '../services/store'
 import { newExpert, saveExperts } from '../services/experts'
-import { type Expert } from 'types/index'
 import ExpertEditor from '../screens/ExpertEditor.vue'
 import ContextMenu from '../components/ContextMenu.vue'
 import Dialog from '../composables/dialog'
 
 const experts: Ref<Expert[]> = ref(null)
-const selected = ref(null)
-const edited = ref(null)
+const selected: Ref<Expert> = ref(null)
+const edited: Ref<Expert> = ref(null)
 
-const moreButton = ref(null)
+const moreButton: Ref<HTMLElement> = ref(null)
 const showMenu = ref(false)
 const menuX = ref(0)
 const menuY = ref(0)
@@ -119,7 +119,7 @@ const onMore = () => {
 const showContextMenu = () => {
   showMenu.value = true
   const rcButton = moreButton.value.getBoundingClientRect()
-  const rcDialog = document.getElementsByTagName('dialog')[0].getBoundingClientRect()
+  const rcDialog = moreButton.value.closest('dialog').getBoundingClientRect()
   menuX.value = rcDialog.right - rcButton.right
   menuY.value = rcDialog.bottom - rcButton.bottom + rcButton.height + 8
 }